Александр

Ну раз переместили index.html, то и конфигурацию поправьте.
https://vite.dev/config/server-options.html#server-open

"Голый" проект совсем иначе выглядит: https://github.com/vitejs/vite/tree/main/packages/...

В наглую как-то так

export const useVerifyAuth = () => {
  const { setIsAuth, setUser, setIsLoading } = useUserStore();
  const pathname = usePathname();

  const { data, error, isLoading, isFetching, refetch } = useQuery({
    queryKey: ["verify-auth"],
    queryFn: () => authService.getNewTokens()
  });

  useLayoutEffect(() => {
    if (error !== null) {
      setIsAuth(false);
      setUser(null);
    }

    if (data !== null) {
       setIsAuth(true);
       setUser(data.data.user);
    }
  }, [data, error])

  useEffect(() => {
    // Тут бы проверить, что прошлый pathname не равен текущему
    refetch();
  }, [pathname, refetch]);

  useEffect(() => {
    setIsLoading(isLoading || isFetching)
  }, [isLoading, isFetching]);
};

А Outlet не пробовали использовать, а не пытаться рядом с роутером положить компонент? Посмотрите внимательно в девтулзах, дотягиваетесь ли со своего компонента до нужного Вам провайдера?

const routes: RouteObject[] = [
  {
    path: "*",
    element: <Outlet />,
    children: [
      {
        id: "page-a",
        path: "page-a",
        element: <PageA />,
      },
      {
        id: "page-b",
        path: "page-b",
        element: <PageB />,
      },
    ],
  },
];

export const Router: FC = () => {
  const router = createBrowserRouter(routes);

  return <RouterProvider router={router} />;
};

Если надо, чтобы странички были обёрнуты в какой-то провайдер, вот, пожалуйста:

export const SuperWrapper: FC = () => {
  return (
    <ThemeProvider theme={theme}>
      <Notifications />
      <Outlet />
    </ThemeProvider>
  );
};

ЗЫ - не перестанете использовать someComponent(), то Вас ждёт удивительный мир потери состояний и прочего.

Поработав какое-то время с React Query могу выделить следующие моменты:
1. Не стоит пытаться объявлять все query за один раз - они "подвисают" в приложении и не используются. Это можно увидеть в React Query Devtools.
2. Можете вынести сами запросы в функци на отдельный слой/уровень/файл, и уже в useQuery в queryFn и в useMutation в mutationFn использовать функции.
3. Сложную бизнес-логику можно смело убрать под хук, в котором будете вызывать, обрабатывать и возвращать данные из useQuery/useMutation'а.
4. React Query - библиотека не для работы с запросами, это, по сути, ещё одно хранилище, которое просто хранит результаты Promise-операций.

Для начала настройте build: для vite / для wepback, чтобы ссылка в итоге совпадала. Вы открываете /build/index.html, а остальные файлы загружаете по /static/something/file.ext, в начале которых нету /build. Ну и надо почитать, как сделать редирект на файл index.html, если юзаете браузерный роутинг.

Идея такая?
https://codesandbox.io/p/devbox/qna-q-1321180-lsxqv9

Вариант решения работает, хоть и выглядит так себе https://github.com/webtorrent/webtorrent/issues/26...
Пример https://codesandbox.io/p/sandbox/qna-q-1320018-yqkjsh

Разбейте на несколько гридов и используйте высоту в самих блоках.

<div className="reference-container">
  <div className="reference-container-panel">
    {isToolsVisible && <div className="tools"></div>}
    {isSeracpPanleVisible && <div className="searchPanel"</div>}
  </div>
  <div className="mainContent"></div>
</div>

.reference-container {
  height: 100%;
  display: grid;
  grid-template-rows: max-content 1fr;
}

.reference-container-panel {
  display: grid;
  grid-auto-rows: max-content;
}

.reference-container-panel:empty {
  display: none;
}

.tools {
  height: 100px;
}

.searchPanel {
  height: 50px;
}

А пропсы для поля где?
https://www.npmjs.com/package/react-input-mask#examples

https://reactrouter.com/en/main/components/outlet

CSS Modules / Usage with Preprocessors