[PublicRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Question

PublicRoute.js

import { Navigate, Route } from 'react-router';
function PublicRoute({ children, ...routeProps }) {
const profile = false;

if (profile) {
return <Navigate to="/" />;
}
return <Route {...routeProps}>{children}</Route>;
}

export default PublicRoute;

App.js:

import { Routes } from 'react-router';
import SignIn from './pages/SignIn';
import Home from './pages/Home';
import PrivateRoute from './components/PrivateRoute';
import PublicRoute from './components/PublicRoute';

function App() {
return (
<Routes>
<PublicRoute exact path="/" element={<SignIn />} />
<PrivateRoute exact path="/" element={<Home />} />
</Routes>
);
}

export default App;

Even after getting rid of all errors and warnings, there's still issue with data/component rendering. I've thoroughly explained the problem on Stackoverflow: https://stackoverflow.com/questions/74455230/uncaught-error-publicroute-is-not-a-route-component-all-component-children