Right way to use Tabbar

[MadMandrake]

Can you make example with whole layout with tabs?
I try to use it like this, but it cover <Outlet/>. And i can't scroll to see full page.

return <div>
    <div>
      <Outlet/>
    </div>
    <Tabbar >
        {tabs.map(({
          id,
          text,
          Icon,
          to
        }) => <RouterLink to={to} key={id}>
                  <Tabbar.Item key={id} text={text} selected={id === currentTab} onClick={() => setCurrentTab(id)}>
                      <Icon />
                  </Tabbar.Item>
              </RouterLink>
        
        )}
      </Tabbar>
  </div>;

[funduck]

I made it work
Original example lacks the part where you make you tab visible
In my example it is {tab()}

import { FixedLayout, Tabbar } from "@telegram-apps/telegram-ui";
import { useState } from "react";

export default function NewHomePage() {
  const tabs = [
    {
      id: "search",
      text: "Search",
      Icon: () => <img src="/Search-icon.png" />,
      Tab: () => <div>Search</div>,
    },
    {
      id: "meets",
      text: "Meets",
      Icon: () => <img src="/Meets-icon.png" />,
      Tab: () => <div>Meets</div>,
    },
    {
      id: "profile",
      text: "Profile",
      Icon: () => <img src="/Profile-icon.png" />,
      Tab: () => <div>Profile</div>,
    },
  ];

  const [currentTabId, setCurrentTab] = useState(tabs[0].id);

  const tab = tabs.find(({ id }) => id === currentTabId)?.Tab!;

  return (
    <FixedLayout vertical="top">
      {tab()}
      <Tabbar>
        {tabs.map(({ id, text, Icon }) => (
          <Tabbar.Item key={id} text={text} selected={id === currentTabId} onClick={() => setCurrentTab(id)}>
            <Icon />
          </Tabbar.Item>
        ))}
      </Tabbar>
    </FixedLayout>
  );
}