reactjs – How to fix the ‘a can only be used in ‘ error in React.js?

I am new to React.js and I was trying to build a blog; however, after I add some components and try to see it on the browser, I met this error:
a <route> is only ever to be used as the child of <routes> element, never rendered directly. please wrap your <route> in a <routes>.
I read a lot of posts but still not fix it.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Route, BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <Route path = "/" component={App}/>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

Appreciate for any help.

I wish someone can tell me why and how to fix it. Thanks.