My page is not rendering , there is some issue with react router dom v6

Question

My page is not rendering ,there is some issue with react router dom version 6. There are no errors being shown and the web pack is compiled succesfully but still the page is not rendered and there are no elements to inspect as well in inspect.

import React from "react";
import { BrowserRouter as Router, Route ,Routes } from "react-router-dom";
import "./App.css";
import Header from "./Components/Header";
import Homepage from "./Pages/Homepage";
import CoinPage from "./Pages/CoinPage";
import { makeStyles } from "@material-ui/core";

function App(){
    const useStyles =makeStyles(()=>({
        App:{
          background: "black",
          color: "white",
          minHeight: "100vh",

        }
    }))

    const classes = useStyles()

  return (
    <Router>
      <div className={classes.App}>
        <Header/>
        <Routes>
        <Route path ="/">element={<Homepage />}</Route>
        <Route path ="/coins/:id">element={<CoinPage/>}</Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Answer 1

<Routes>
  <Route path="/" element={<Homepage />} />
  <Route path="/coins/:id" element={<CoinPage />} />
</Routes>

Your import is Homepage not HomePage, typo mistake on the above answer

Answer 2

try this

<Routes>
  <Route path="/" element={<Homepage />} />
  <Route path="/coins/:id" element={<CoinPage />} />
</Routes>

and in index.js dont forget to add

<BrowserRouter>
  <App />
</BrowserRouter>

as @david ho said there is a uppercase character importing HomePage as Homepage