I'm trying to make a nested routing with tabs on a page and cross-linking but no success. Please help to make it work.

1. I have a route /files which contains two tabs: Raw Medias tab and Datasets tab . On tab switching page url is not changed it's always the same /files . How can I make page url changes on tab switching? For example, default tab on page /files is Raw Medias. So how to make it: if user lands on /files page then page url is /files/raw-medias . If user switches on Dataset tab then page url should be /files/datasets .
2. Each tab has a list with clickable items. On item click item's page opens /files/raw-medias/id . This page has Back button. On click Back button opens /files page with active default tab. How to make so that on Back button click opens /files page with active tab for that item? For example if active tab is Dataset tab and user clicks on item and then on Back button then Dataset tab should be active.
3. Raw Media Page has a list. This list is the content of Dataset tab (cross linking). How to make so if user clicks on item in that list then he should land Dataset item page? For example, user is on /files/raw-media/id and click on an item in list then /files/dataset/id page should open. At the moment I get an error because on this this url opens /files/raw-media/id/dataset/id

Codesandboxhttps://codesandbox.io/s/react-router-tabs-ciivld?file=/src/App.tsx

My routes:

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
    children: [
      {
        path: "/files",
        element: <FilesPage />
      },
      {
        path: "files/raw-media/:rawMediaId",
        element: <RawMediaPage />
      },
      {
        path: "files/dataset/:datasetId",
        element: <DatasetPage />
      }
    ]
  }
]);

Tabs page

type Tab = "raw-medias" | "datasets";
    
    const FilesPage = () => {
      const [tab, setTab] = useState<Tab>("raw-medias");
    
      const handleChangeTab = (tab: Tab) => {
        setTab(tab);
      };
    
      return (
        <Stack>
            FilesPage
            <Button onClick={() => handleChangeTab("raw-medias")}>
              Raw Medias Tab
            </Button>
            <Button onClick={() => handleChangeTab("datasets")}>
              Datasets Tab
            </Button>
    
            {tab === "raw-medias" ? <RawMediaList data={RAW_DATA} /> : null}
            {tab === "datasets" ? <DatasetList data={DATASET_DATA} /> : null}
        </Stack>
      );
    };

RawMediaPage.tsx (single item page with Back button)

const RawMediaPage = () => {
  const { rawMediaId } = useParams();
  const navigate = useNavigate();

  return (
    <Stack>
      <Typography>
        This is RAW Media Page
      </Typography>
      <Button onClick={() => navigate(-1)}>
        Go Back to tab list
      </Button>

      <Stack>
        This is Dataset List on RAW Media Page
        <DatasetList data={DATASET_DATA} />
      </Stack>
    </Stack>
  );
};

DatasetList.tsx (list with clickable items)

const navigate = useNavigate();

  const handleClick = (id: number) => {
    navigate(`dataset/${id}`);
  };

  return (
    <Stack>
      {data.map((item) => {
        return (
          <Box onClick={() => handleClick(item.id)} key={item.id}>
            {item.name}
          </Box>
        );
      })}
    </Stack>
  );
};