in this code my first component is running correctly but the second one (ProuductList) is not showing up on the screen at all, any ideas?

import { Route, Routes } from "react-router-dom";
import { HomePage, ProuductList } from '../pages';

export const AllRoutes = () => {
  return (
    <>
    <Routes>
        <Route path="/" element = {<HomePage />}/>
        <Route path="/Prouducts" element = {<ProuductList />}/>
    </Routes>
    </>
  )
}

the code is from a tutorial that i am following, so i checked my code with the original one, i also tried instead and it did not work.