Protecting Routes using React Router DOM v5

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ChakraProvider } from "@chakra-ui/react";
import {BrowserRouter} from "react-router-dom"
import ChatProvider from "./Context/ChatProvider";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <ChatProvider>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    
    </ChatProvider>
  </BrowserRouter>
    
  
);

import './App.css';
import HomePage from "./Pages/HomePage";
import ChatPage from "./Pages/ChatPage";
import TrialPage from "./Pages/TrialPage";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ProtectedRoute from "./utils/ProtectedRoute"
import ProtectedRouteTwo from "./utils/ProtectedRoute"
import { ChatState } from './Context/ChatProvider';
import { useEffect } from 'react';

function App() {
  
  const {user} = ChatState()

  useEffect(()=>{
    console.log("userDSE",user)
  })
  
  return (
    <div className="App">
    
      <Route path="/" component={HomePage} exact />
      <Route path="/chats" component={ChatPage}exact/>
    </div>
  );
}

export default App;

Does anyone have any idea how to protect my routes for “/chats”, I configured my routers this way while following along a YouTube tutorial. I have been trying to look for solutions
online but they were mostly for v6