[Bug]: useNavigate does not work in production about react-router HOT 5 CLOSED

export const routes = {
    login: '/',
    forgotPassword: '/forgot-password',
    newPassword: '/new-password/:userId/:code',
    main: '/main',
    chat: '/chat',
} as const;

export const useRouter = () => {
    const router = createBrowserRouter([
        {
            path: routes.login,
            element: <LoginPage />,
        },
        {
            path: routes.forgotPassword,
            element: <ForgotPasswordPage />,
        },
        {
            path: routes.newPassword,
            element: <NewPasswordPage />,
        },
        {
            path: routes.main,
            element: <MainPage />,
        },
        {
            path: routes.chat,
            element: <ChatPage />,
        },
        {
            path: '*',
            element: <Navigate to={routes.login} replace />,
        },
    ]);
    return router;
};

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

import { RouterProvider } from 'react-router-dom';
import { useRouter } from './utils/routes';
import { ThemeProvider } from '@emotion/react';
import { createTheme } from '@mui/material/styles';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

function App() {
    const queryClient = new QueryClient();
    const router = useRouter();
    const theme = createTheme({
        palette: {
            primary: {
                main: '#399190',
                dark: '#2E6461',
                light: '#5FB2B3',
                contrastText: '#FFFFFF',
            },
            secondary: {
                main: '#4A64A2',
                dark: '#254B94',
                light: '#94A3C7',
                contrastText: '#FFFFFF',
            },
            error: {
                main: '#D32F2F',
                dark: '#C62828',
                light: '#EF5350',
                contrastText: '#FFFFFF',
            },
            warning: {
                main: '#EF6C00',
                dark: '#D96303',
                light: '#FF9800',
                contrastText: '#FFFFFF',
            },
            info: {
                main: '#0288D1',
                dark: '#01579B',
                light: '#03A9F4',
                contrastText: '#FFFFFF',
            },
            success: {
                main: '#2E7D32',
                dark: '#1B5E20',
                light: '#4CAF50',
                contrastText: '#FFFFFF',
            },
        },
        typography: {
            fontFamily: 'Roboto',
        },
    });

    return (
        <QueryClientProvider client={queryClient}>
            <ThemeProvider theme={theme}>
                <RouterProvider router={router} />
            </ThemeProvider>
        </QueryClientProvider>
    );
}

export default App;

  const onConfirmAuthorization = () => {
        navigate(routes.main);
    };