I am trying to access specific data from my django backend based on using the unique id in the url for my react app on the frontend. I expect to see the body of the journal

Instead i get this error:
TypeError: Cannot read properties of undefined (reading 'params')

I tried to use, 'useParams' instead but it lead to more errors. I also found similar questions on SO but they mentioned using 'props', is this the method i should be attempting instead?

edit: [here](https://reactrouter.com/docs/en/v6/getting-started/overview) is an example of why i am using element instead of component.

my App.js

```
import {
  BrowserRouter, Routes,
  Route, Router,
} from "react-router-dom";
import './App.css';
import Header from './components/Header'
import JournalDashboard from './pages/JournalDashboard'
import JournalPage from './pages/JournalPage'

function App() {
  return (
      <div className="App">
        <BrowserRouter>
          <Header /> 
          <Routes>
              <Route path="/" exact element={<JournalDashboard/>}></Route> 
              <Route path="/journals/:id" element={<JournalPage/>} ></Route> 
          </Routes>
        </BrowserRouter>
      </div>

  );
}

export default App;

```

my JournalPage.js

```
import React, { useState, useEffect } from 'react'

const JournalPage = ({ match }) => {

    let  journalId  = match.params.id
    let [journal, setJournal] = useState(null)

    useEffect(() => {
        getJournal()
    }, [journalId])

    let getJournal = async () => {
        let response = await fetch(`/api/journals/${journalId}/`)
        let data = await response.json()
        setJournal(data)
    }

    return (
      <div>
        <p>{journal?.body}</p>
      </div>
    )
}

export default JournalPage

```

Thanks in advance