I'm following along with this React Tutorial on YouTube but I can't get my routes to render on own dev server.

This is what my home screen is rendering. My home screen should show a pink background underneath the navigation bar.

I suspect the error is happening in this section of my App.js code, since everything else outside of works fine:

<Routes>
  <Route exact path="/" component={HomeScreen}/>
</Routes>

I'm using react-router-dom v6.3.0

My App.js code:

import './App.css';
import { useState } from "react";
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";

// Screens
import HomeScreen from './screens/HomeScreen';

// Components 
import Navbar from './components/Navbar';
import SideDrawer from './components/SideDrawer';
import Backdrop from './components/Backdrop';

function App() {
  const [sideToggle, setSideToggle] = useState(false);

  return (
    <Router>
      <Navbar click={() => setSideToggle(true)} />
      <SideDrawer show={sideToggle} click={() => setSideToggle(false)} />
      <Backdrop show={sideToggle} click={() => setSideToggle(false)} />
      <main>
        <div className="app">This is a test</div>
        <Routes>
          <Route exact path="/" component={HomeScreen}/>
        </Routes>
      </main>
    </Router>
  );
}

export default App;

My index.js code:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

My HomeScreen code:

import "./HomeScreen.css";

const HomeScreen = () => {
  return (
    <div className="homescreen">
      Home Screen
    </div>
  )
}

export default HomeScreen

Hope someone's able to give some advice to a React newbie? Please let me know if I need to provide more info.