I have a component named Tasks.js which renders on the route /tasks

<Route path="/tasks" component={Tasks} />

Inside this component, I make some API CALLS and store some state and also render a react-router switch to render 2 different tabs

    const Tasks =()=>{
      const [count, setCount] = React.useState(0);
    
           useEffect(() => {
            //api calls
          }, [])
      return (
           <Box>
             <FiltersAndOtherComponents/>
             <Switch>
                <Redirect exact from="/tasks" to="/tasks/my-overview" />
        
                <Route exact path="/tasks/my-overview"  component={MyOverview} />
                <Route exact path="/tasks/my-work/monthly/:calendarId" component={MonthlyCalendar} />
                <Route exact path="/tasks/my-work/weekly/:calendarId" component={WeeklyCalendar} />
             </Switch>
          <Box>)
    .

The problem is when I switch from /tasks/my-overview to /tasks/my-work and vice versa, the state of the component gets totally reset (the component is remounted).

How can I fix this? To switch between routes in the parent component and maintain the state