I’m using react router v6 with Vite as bundler and encountered the following problem:

• I have routes like this:

const routes = [{
        path: '*',
        element: <Layout />,
        children: [
            {
                path: ':interviewId',
                element: (
                    <SocketProvider>
                        <Intro />
                    </SocketProvider>
                ),
            },
}]

• In my <Layout/> component, I have this line of code that get the interviewId from the param:

const Layout: FC<LayoutProps> = () => {
  const interviewId: any = useRef(useParams().interviewId);
 ....
}

In development mode, my application successfully retrieved the interviewId, e.g: {*: 'dG57JhCuur8M', interviewId:'dG57JhCuur8M'}. But somehow when I build the project, the interviewId disappeared when I call useParams(), e.g: {*: 'dG57JhCuur8M'}

I tried update my vite.config.ts following this issue but it didn’t worked.