Javascript Filter Method

Question

I am trying to filter an array of objects to display some content and for some reason it does not display anything .

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>

TutorialDisplay.js

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