I am using v6 React Router Dom

I have a system where my game rooms are /g/:id (where :id is a 4 alphanumeric code) and if the user navigates there, it will join that game if the user is allowed and render the game.

It works fine, but this warning keeps popping up in the console:

"Matched leaf route at location "/g/6N21" does not have an element. This means it will render an with a null value by default resulting in an "empty" page."

How do I make it so the code doesn't set off a warning?

Here are some snippets

//EDIT: Added ALL Routes
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="create" element={<Create />} >
                <Route path=":qid" element={<Create />} />
                </Route>
            <Route path="trade" element={<Trade />} />
            <Route path="play" element={<Play />} />
            <Route path="login" element={<Login />} />
            <Route path="profile" element={<Profile />} >
                <Route path=":uid" element={<Profile />} />
                </Route>
            <Route path="q" element={<Quark />} >
                <Route path=":qid" element={<Quark />} />
            </Route>
            <Route path="g" element={<GameWindow />} />
            <Route path="/g/:id" element={<GameWindow />} /> // <--- This is the route here
        </Routes>

const location = useLocation();
const navigate = useNavigate();

//useEffect:
let joinCode = location.pathname.slice(-4);
//if joinCode is valid...
navigate(generatePath('/g/:id', { id: joinCode }));

Perhaps I'm using React Router Dom the wrong way, so please let me know if there's a better way to do this.