Multiple providers

App.js

const App = () => {
  return (
    <AuthenticationProvider>
      <Router>
        <Home path="/" />
        <UserProfile path="/myProfile" />
        <Dashboard path="/dashboard" />
      </Router>
    </AuthenticationProvider>
  )
}

const UserProfile = () => {
  const { userId } = useAuthenticationContext()
    
  return (
    <UserProvider userId={userId}>
      <UserNav />
      <UserNotification />
      <UserSettings />
    </UserProvider>
  )
}

const Dashboard = () => {
  return (
    <DashboardProvider>
      <DashboarNav />
      <DashboardContent />
    </DashboardProvider>
  )
}