Tabbar height

[reflash]

Hello,
I'm trying to use Tabbar component for my app, the issue I'm having is I'm not able to properly determine tabbar height, so I could position other elements properly and it seems that tabbar doesn't have a "ref" prop so I could hack it in some way.
Maybe I'm using it absolutely wrong, so please advise on that:

const tabs = [
  { id: 'tab1', text: 'Tab1', icon: 'icon1' },
  { id: 'tab2', text: 'Tab2', icon: 'icon2' },
  { id: 'tab3', text: 'Tab3', icon: 'icon3' }
];

export const IndexPage: FC = () => {
  const [currentTab, setCurrentTab] = useState(tabs[0].id);
  const [tabbarHeight, setTabbarHeight] = useState(0);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if(ref.current) setTabbarHeight(ref.current.clientHeight);
  })
  
  return (
    <Page back={false}>
      <Tabbar ref={ref}>
        {tabs.map(({
        id,
        text,
        icon
      }) => <Tabbar.Item key={id} text={text} selected={id === currentTab} onClick={() => setCurrentTab(id)}>
            <Icon icon={icon} />
          </Tabbar.Item>)}
      </Tabbar>
      {currentTab === 'tab1' && <Tab1Page />}
      {currentTab === 'tab2' && <Tab2Page />}
      {currentTab === 'tab3' && <Tab3Page />}
    </Page>
  );

I need the height to position floating components like Floating Action Button and Snackbar