React JS useParams

Question

I am trying to display the content for each page using useParams , but it doesn't work. I will put some screenshots below with the components. Every single object from the tutorials.js has a id and when I click on the "check it out" button it should display the content for that id .enter image description here

App.js

<BrowserRouter>
  <Routes>
    <Route
      path="/"
      element={
        <ProtectedRoute>
          <SharedLayout />
        </ProtectedRoute>
      }
    >
      <Route index element={<Profile />} />
      <Route path="tutorials" element={<Tutorials />} />
      <Route path="tutorials/:id" element={<TutorialDisplay />} />

      <Route path="tests" element={<Tests />}></Route>
      <Route path="tests/test1" element={<Test />} />
    </Route>
    <Route path="/register" element={<Register />} />
    <Route path="/landing" element={<Landing />} />
    <Route path="*" element={<Error />} />
  </Routes>
</BrowserRouter>

Tutorial.js

{tutorials.map((tutorial) => (
    <div className="card" key={tutorial.id}>
      <div className="card-body">
        <img src={tutorial.img} className="card-img" />
        <h2 className="card-title">{tutorial.name}</h2>
        <p className="card-desc">{tutorial.desc}</p>
      </div>
      <Link className="btn" to={`${tutorial.id}`}>
        Check it out!
      </Link>
    </div>
  ))}

TutorialDisplay.js

{tutorials
    .filter((tutorial) => tutorial.id === id)
    .map((tutorial) => {
      <div key={tutorial.id}>
        <h1>{tutorial.name}</h1>
        <p>{tutorial.desc}</p>
      </div>;
    })}