Using <Navigate> with `react-router-dom` and `next.js` - next.js

Question

So I have a slightly weird setup where I redirect all routes where I need dynamic routing to index.tsx and use react-router-dom to handle those routes Client-side. I mainly had to do this because it seems that when exporting Next.js sites to a static site, Next.js generates pages for each route, so I can't generate new routes in Javascript.
However, this setup doesn't seem work properly when using react-router-dom's <Navigate /> component. For example,
// index.tsx
const Home: FC = () => {
// Currently going to generate the room id locally, but we
// should do this server side so that we can guarantee uniqueness.
return (
<Router>
<Routes>
<Route path="/" element={<RedirectToMain />} />
<Route path="/:roomId" element={<Main />} />
</Routes>
</Router>
);
}
const RedirectToMain: FC = () => {
const generatedRoomId = Array(5)
.fill(null)
.map(x => alphabet[Math.floor(26 * Math.random())])
.join('');
console.log('navigating');
return <Navigate to={generatedRoomId} />;
}
const Main: FC = () => {
const { roomId } = useParams();
console.log(roomId);
// We must wait for roomId to load before running.
if (!roomId || roomId.length === 0) {
return <></>;
}
return (
<WebSocketProvider roomId={roomId}>
<MinesAppBar url={`http://mineswpr.io/${roomId}`} />
<Board />
</WebSocketProvider>
);
};
When running this locally with yarn next dev, it redirects to localhost:3000/ABCDE and then the url changes back to localhost:3000/. When running this as a static site which is setup to redirect all traffic to /index.html, it seems to constantly call <Navigate />.
How can I fix this issue?