Im using react-router-v6 and I have problems with my setup. I'm using nested routing with layouts with following settings.

App.js

<BrowserRouter>
      <Routes>     
        <Route exact path='/' element={<SiteLayout />} />
      </Routes>
      <Routes>
        <Route path='/app/' element={<AppLayout />} >
          <Route path='dashboard' element={<Dashboard />} />
          <Route path='send' element={<Send />} />
        </Route>
      </Routes>
    </BrowserRouter>

AppLayout is a class element and have some state variables and data fetching im passing to Dashboard component through <Outlet /> using context at the moment. This works fine but the Dashboard component should be able to do its own rest call using data passed from AppLayout when new data arrives. This I was planning to do with componentDidUpdate in Dashboard component but what i understood it does not work with context? So every time I pass context to Dashboard it does not fetch data and does not update. How could i continue from here? Im tearing my hair here atm :D trying to figure how to work with this. Is there some other way to automatically run a function when class component gets new data?