Material UI tabs with Nested Routes - Refreshing page error

So I'm trying to implement material UI tabs with React Router Dom (Nested Routes), I made the routes but I'm facing an issue:

The tabs are working fine here as shown in the images below

The issue is that when I refresh the page it shows the password tab content with the general tab content! as shown in the image below

App.js The first path should be the page of General Tab:

<Route path="/account" element={user ? <Settings /> : <Register />}>
  <Route path="/account/profile" element={<EditProfile />} />
  <Route path="/account/password" element={<EditPassword />} />
  <Route path="/account/social_profiles" element={<SocialProfiles />} />
  <Route path="/account/notifications" element={<EditNotifications />} />
</Route>

VerticalTabs.jsx:

<Tabs
    orientation="vertical"
    variant="scrollable"
    value={value}
    onChange={handleChange}
    aria-label="Vertical tabs example"
    sx={{ borderRight: 1, borderColor: 'divider' }}
  >

    <Tab component={Link} to={"/account"} label="General" {...a11yProps(0)} />
    <Tab component={Link} to={"/account/profile"} label="Edit Profile" {...a11yProps(1)} />
    <Tab component={Link} to={"/account/password"} label="Password" {...a11yProps(2)} />
    <Tab component={Link} to={"/account/social_profiles"} label="Social Profiles" {...a11yProps(3)} />
    <Tab component={Link} to={"/account/notifications"} label="Notifications" {...a11yProps(4)} />
    <Tab label="Sessions" {...a11yProps(5)} />
    <Tab label="Delete Account" {...a11yProps(6)} />
  </Tabs>
  
  <TabPanel value={value} index={0}>
    <General />
  </TabPanel>
  <TabPanel value={value} index={1}>
  </TabPanel>

  <TabPanel value={value} index={2}>
  </TabPanel>

  <TabPanel value={value} index={3}>
  </TabPanel>

  <TabPanel value={value} index={4}>