I am following Colt Steele's React course. Sadly, the course is outdated so I chose to migrate to the latest versions of libraries myself.

Coming to the point, I am now facing this error where I am not able to extract URL params using the useParams hook in my functional ponent. I am pasting my code below for the munity to check.

App.js

import Palette from './Palette';
import seedPalettes from './assets/seedPalettes'
import './css/App.css'
import { generatePalette } from './assets/colorHelpers';
import { Routes, Route, Link, useParams } from 'react-router-dom';

function App() {

  const { id } = useParams()
  const findPalette = id => {
    return seedPalettes.find(function (palette) {
      return palette.id == id;
    })
  }

  console.log(id);

  return (
    <div className='App'>
      <Routes>
        <Route path='/' element={<h1>Wele Home</h1>} />
        <Route path='/palette/:id' element={<Palette palette={generatePalette(findPalette(id))} />} />
      </Routes>

      {/* <Link to='/palette'>See Palette</Link> */}
      {/* <Palette palette={generatePalette(seedPalettes[4])} /> */}
    </div>
  );
}

export default App;

seedPalettes.js

export default [
    {
        paletteName: "Material UI Colors",
        id: "material-ui-colors",
        emoji: "