Please help me

When the Route is not inside <Routes> it gives an error: Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a

When it is inside <Routes> it give an error as: Error: [Abc] is not a <Route> component. All component children of must be a <Route> or <React.Fragment>

Pls help me to resolve this situation? Or any suggestion.

Tried this but one of the above error in both cases.

As this does not generate an error, however my child component of the private route does not render.

import React from 'react'
import './App.css'
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import Header from './components/Header'
import Home from './components/Home'
import Login from './components/Login'
import ProtectedRoute from './components/Helper/ProtectedRoute';
import { UserStorage } from './UserContext';
import User from './components/User';

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <UserStorage>
          <>
            <Header />
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="login/*" element={<Login />} />
              <Route path='/conta' element={<ProtectedRoute/>}>
                <Route path='/conta' element={<User/>}/>
              </Route>
            </Routes>
          </>
        </UserStorage>
      </BrowserRouter>
    </div>
  )
}

export default App;

ProtectedRoute

import React from 'react';
import { UserContext } from '../../UserContext';
import {Routes, Route,  Navigate } from 'react-router-dom';

const ProtectedRoute = (props) => {
  const { login } = React.useContext(UserContext);

  if (login === true) return (
    <Routes>
      <Route {...props} />
    </Routes>
  );
  else if (login === false) return <Navigate to="/login" />;
  else return null;
};

export default ProtectedRoute;