Why is the component from the HOC not being rendered?

Question

React

Hello everyone, there is such a code HOC'a.

import { useSelector } from "react-redux";
import LoginPage from "../containers/LoginPage/LoginPage";

const WithAuth = (ProtectedComponent) => {
  const isAuth = useSelector((store) => store.userReducer.isAuth);
  const redirect = !isAuth;
  return (props) => {
    if (redirect) {
      return <LoginPage />;
    }
    return <ProtectedComponent {...props} />;
  };
};
export default WithAuth;

Here is its usage

const StartPageWithAuth = WithAuth(<StartPage />);
  return (
    <div className='App'>
      <Header />
      <Routes>
        <Route path='/home' element={<StartPageWithAuth />} />
        <Route path='/login' element={<LoginPage />} />
        <Route path='/registration' element={<RegistrationPage />} />
      </Routes>
    </div>
  );
}

Throws an error type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: . Did you accidentally export a JSX literal instead of a component?
Although I do everything according to the documentation, I also return the component from the hook ...
BUT if we replace what the hook returns, for example, instead of returning ; Everything works!! What could be wrong? return <ProtectedComponent {...props} />;return <div>Protected Page</div>/>

Answer 1

Try to give the StartPage component not in the form of JSX, but simply WithAuth(StartPage);