Why props.children are not rendered on the first render? I have to refresh the page, so then props.children appear on the page

I’m working on the web-app that has a role choice when you visit for the first time. After I choose the admin role for example, it sets the value of userRole in localStorage.

Here is App you can see that depending on the current role there are different routes.

After I have the role chosen, I’m redirected to the ‘/’ route and I actually want to see the component that renders this route which is TableBoard in this case, but instead I firstly get render={() => <Container>its from app.tsx {route.component}</Container>}. So on the first render I only see its from app.tsx, then I refresh the page and everything is fine.

How to fix routing here?

Please ask if something is unclear.

function App() {
  const currentRole = useReduxSelector(state => state.auth.currentRole);
  const accessToken = localStorage.getItem('accessToken');
  const role = localStorage.getItem('role');

  const getCurrentRoutes = () => {
    if (role === 'userCollaborator') {
      return AccRoutes;
    } else if (role === 'userAdmin') {
      return AdminRoutes;
    } else if (role === 'userHr') {
      return HRRoutes;
    } else if (role === 'userPartner') {
      return Routes;
    } else {
      return RoutesAuth;
    }
  };
  const routes = getCurrentRoutes();
  let routesComponents;
  if (currentRole && accessToken) {
    routesComponents = routes?.map(route => {
      return (
        <Route
          key={route.name}
          exact
          path={route.path}
          render={() => <Container>its from app.tsx {route.component}</Container>}
        />
      );
    });
  } else {
    routesComponents = routes?.map(route => {
      return (
        <Route
          key={route.name}
          exact
          path={route.path}
          component={route.component}
        />
      );
    });
  }
  return (
    <BrowserRouter>
      <Provider store={store}>{routesComponents}</Provider>
    </BrowserRouter>
  );
}

export default App;

Component that should be rendered for the route I’m redirected:

export const TableBoard = () => {
  return (
    <Container>
      <div>here I have a lot of other content so it should be rendered as props.children in Container</div>
    </Container>
  );
};

And the code for Components.tsx looks this way:

const Container: React.FC<ContainerProps> = ({children}) => {
  return (
    <div>
      {children}
    </div>
  );
};

export default Container;