[Bug]: the state is not destroyed in the useFetcher hook with key parametr about react-router HOT 1 OPEN

import { StrictMode, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  Link,
  Outlet,
  useFetcher,
  RouterProvider,
  createBrowserRouter,
  createSearchParams,
  generatePath,
} from "react-router-dom";

const AppLayout = () => {
  return (
    <div>
      <div>
        <Link to={"/fetcherWithKey"}>FetcherWithKey</Link>
        <br />
        <Link to={"/fetcherWithoutKey"}>FetcherWithoutKey</Link>
        <br />
        <Link to={"/other"}>Other</Link>
      </div>
      <Outlet />
    </div>
  );
};

const fakeLoader = async ({ request }) => {
  const url = new URL(request.url);
  const page = Number(url.searchParams.get("page")) || 0;

  const data = Array.from({ length: 15 }, (_, i) => i + page * 15).map(
    (id) => ({
      id,
    })
  );

  await new Promise((res) => setTimeout(res, 500));

  return Promise.resolve({
    data,
    page,
  });
};

const FetcherWithKey = () => {
  const fetcher = useFetcher({ key: "list1Route" });

  const handleFetcher = () => {
    const search = createSearchParams({
      page: String(fetcher.data ? fetcher.data.page + 1 : 0),
    });

    const generatedPath = generatePath(`/fetcherWithKey?${search}`);

    fetcher.load(generatedPath);
  };

  return (
    <div>
      <button onClick={handleFetcher}>Load fetcher</button>
      <pre>{JSON.stringify(fetcher, null, " ")}</pre>
    </div>
  );
};

const FetcherWithoutKey = () => {
  const fetcher = useFetcher();

  const handleFetcher = () => {
    const search = createSearchParams({
      page: String(fetcher.data ? fetcher.data.page + 1 : 0),
    });

    const generatedPath = generatePath(`/fetcherWithoutKey?${search}`);

    fetcher.load(generatedPath);
  };

  return (
    <div>
      <button onClick={handleFetcher}>Load fetcher</button>
      <pre>{JSON.stringify(fetcher, null, " ")}</pre>
    </div>
  );
};

const Other = () => {
  return "OtherRoute";
};

const FetcherWithKeyRoute = {
  path: "/fetcherWithKey",
  element: <FetcherWithKey />,
  loader: fakeLoader,
};

const FetcherWithoutKeyRoute = {
  path: "/fetcherWithoutKey",
  element: <FetcherWithoutKey />,
  loader: fakeLoader,
};

const OtherRoute = {
  path: "/other",
  element: <Other />,
};

const routes = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
    children: [FetcherWithKeyRoute, FetcherWithoutKeyRoute, OtherRoute],
  },
]);

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <RouterProvider router={routes} />
  </StrictMode>
);