I've had a problem with rendering NotFound page with the following code, component Routing is a children in my Switch component located in App.tsx:

const Routing = (): JSX.Element => {
  return (
    <>
      {publicRouting.map(({ path, component }, i) => (
        <Route key={i} path={path} component={component} />
      ))}
      {isAuthenticated() && (
        <Main>
          {routing.map(({ path, component }, i) => (
            <Route exact key={i} path={path} component={component} />
          ))}
        </Main>
      )}
    </>
  );
};

my publicRouting and routes used above:

export const publicRoutes = {
  login: "/login",
  notFound: "*"
};

export const publicRouting = [
  { path: publicRoutes.login, component: Login },
  { path: publicRoutes.notFound, component: NotFound }
];

can someone tell me why, after logging in to private routes (isAuthenticated() === true) my NotFound page is always rendering above the Main component?

Here is the small screenshot of this situation, NotFound component is physically rendering above the Main component and his children

If anyone want more code then it feel free, I will paste it

thanks for any help!