react-router-dom unmounting outlet on page switch

Question

I am rendering different sections in my dashboard using a nested Route.

The problem is when I navigate between sections (using react-router-dom Link) it unmounts the section so when I go back it has to re-load and re-render the section.

Here is how i'm setting the routes

                <Routes>
                    {(!user.loaded && userWasLoaded) || (user.loaded && user?.user) ? (
                        <Route path='/' element={<DashboardPage />}>
                            <Route index element={<Feed />} />
                            <Route path='/configuration' element={<Listeners />} />
                            <Route path='/team' element={<Team />} />
                            {user?.user?.isAdmin && (
                                <Route path='/admin' element={<Admin />} />
                            )}
                        </Route>
                    ) : (
                        <Route path='/' element={<LoginPage />} />
                    )}

                    <Route path='/login' element={<LoginPage />} />
                    <Route path='/pricing' element={<Pricing />} />
                    <Route path='/privacy' element={<PrivacyPolicyPage />} />
                    <Route path='*' element={<Navigate to='/' />} />
                </Routes>

and here is how i'm getting data in my pages:

const Team = () => {
    const [plan, setPlan] = React.useState(null);

    useEffect(() => {
        API.getMyPlan().then((data) => setPlan(data));
    }, []);

I am expecting react and react-router-dom to NOT unmount each section whenever I navigate between pages.