Почему не рендерится компонент из HOC?

Question

[JavaSscriptNoob]

Всем привет , есть такой код 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;

Вот его использование

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>
  );
}

Кидает ошибку 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?
Хотя я делаю всё по документации , тобеж возвращаю компонент из хока ...
НО если заменить то что возвращает хок , например вместо return <ProtectedComponent {...props} />; возвращать return <div>Protected Page</div>/>; Всё равботает !!
В чём может быть ошибка ?

Answer 1

[Pavel Shvedov]

Попробуй компонент StartPage отдавать не в виде JSX, а просто WithAuth(StartPage);