BrowserRouter Showing blank Page

I'm following a YouTube video tutorial that creates a blog with React and Sanity CMS. Everything went well until I added some code. It keeps showing a blank page. The Video I'm following is using { Switch } but I did some research and found that { Switch } no longer works in V6.

Here's my code:

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Header2 from "./components/Header";
import HomePage from "./pages/HomePage";
import Blog from "./pages/Blog";
import SinglePost from "./pages/SinglePost";
import Erorr from "./pages/Erorr";

function App() {
  return (
    <BrowserRouter>
      <Header2 />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/blog/:slug" element={<SinglePost />} />
        <Route path="/" element={<Erorr />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Header.js

import React from 'react'
import { Link } from 'react-router-dom'
export default function Header2() {
  return (
    <>
      <h1>hi</h1>
      <header>
        <div className='logo'>
          <Link to="/">
            AndiiCodes Blog
          </Link>
        </div>
        <nav>
          <ul>
            <li>
              <button>
                <Link to="/blog" relative="path">Blog</Link>
              </button>
            </li>
            <li>
              <button>
                <Link to="/" relative="path">Home</Link>
              </button>
            </li>
          </ul>
        </nav>
      </header>
    </>
  )
}

Blank Screenshot

screenshot

files structure

files structure

Console Erorrs:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:13.
    at App

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at BrowserRouter (index.tsx:292:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)

react-dom.development.js:18687 The above error occurred in the <BrowserRouter> component:

    at BrowserRouter (http://localhost:3000/static/js/bundle.js:43763:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

package.json

{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I rechecked all the files names, I tried to remove <BrowserRouter> and all the Routes, the header showed up with no problems. When I'm adding the <BrowserRouter> it's displaying blank again.

You are missing react-router-dom as a dependency.

"dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
},

To add it to your project and update the package.json file run the following in the root directory of the project: npm i -S react-router-dom@6

Then restart the project: npm start