i am new to React and following a course i am getting below error, while same is working for him.. may be because i am using latest react?
useNavigate() may be used only in the context of a component.

my App.js file code

import React from 'react'
import { Container } from 'react-bootstrap';
import Header from './components/Header';
import Footer from './components/Footer';
import { Outlet } from 'react-router-dom';
const App = () => {
  return (
    <>
      <Header />
      <main className='py-3'>
        <Container>
          <h1>Welcome to Mutual fund Protfolio manager</h1>
          <Outlet></Outlet>
        </Container>
      </main>
      <Footer />
    </>
  )
}

export default App

my index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
//import 'bootstrap/dist/css/bootstrap.min.css';
import {createBrowserRouter,createRoutesFromElements,Route, RouterProvider} from 'react-router-dom';
import './assets/styles/bootstrap.custom.css';
import './assets/styles/index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HomeScreen } from './components/screens/HomeScreen';
const routes = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />} >
      <Route index={true} path="/" element={<HomeScreen />} />
    </Route>
  )
)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={routes}>
      </RouterProvider>
  </React.StrictMode>
);


reportWebVitals();

my package json contents:

  "dependencies": {
    "bootstrap": "^5.3.3",
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-bootstrap": "^2.10.6",
    "react-dom": "^19.0.0",
    "react-icons": "^5.4.0",
    "react-router-bootstrap": "^0.26.3",
    "react-router-dom": "^7.0.2",
    "react-scripts": "5.0.1"
  },

tried different option from online not working..