There are few ways to achieve that:

• You can move the individual_project route inside the Projects component like this:

const Projects = () => {
...other logic
return(
 <Routes>
   <Route path="/individual_project" element={<IndividualProject />} />
 </Routes>
)
}

Docs here: https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes

• Alternatively, you could also create a context to wrap the routes. Then, you can retrieve the variables directly from the context:

<Context.Provider value={yourValuesToShare}>
 <Routes>
    <Route path="/" element={<Login navigate={navigate} setOverlays={setOverlays} setToken={setToken} setUser={setUser} />} />
    <Route path="/create-account" element={<CreateAccount />} />
    <Route path="/projects" element={<Projects token={token} name={user.name} jobTitle={user.jobTitle} navigate={navigate} setOverlays={setOverlays} />} />
    <Route path="/individual_project" element={<IndividualProject />} />
 </Routes>
</Context.Provider>

Docs here: https://reactjs.org/docs/context.html

For this kind of scenarios , using Context API is recommended .its more precise and cleaner that the other techniques. React docs

Context api is used to access state from any component so react context api is recommended