map() JSON and return data

Question

I might need your help.. I am fetching from apiUrl some JSON data. The code below delivers the result that all "name" from liste.json are returned. But I would like to add an addtitional requirement, where only "name" will be returned, when "categorie" === "Tool"

Thanks, Konstantin

test.js

import { useState, useEffect } from "react";

export default function ExampleCheckbox() {
  const [showPosts, setshowPosts] = useState();
  const apiUrl = "/api/liste";
  let displayData;

  function pullJson() {
    fetch(apiUrl)
      .then((response) => response.json())
      .then((responseData) => {
        displayData = responseData.map(function (liste) {
          return <p key={liste.id}>{liste.name}</p>;
        });
      });
  }

  useEffect(() => {
    pullJson();
  }, []);


  return (
      <div>
        <main>
          <p>Test</p>
          {showPosts}
        </main>
      </div>
  );
}

liste.json

  {
    "name": "Werkzeugkoffer",
    "categorie": "Tool",
    "dauer": "Woche",
    "verkehrsmittel": "Auto",
    "region": "Italien",
    "gruppengre": "groß",
    "unterkunft": "Fewo",
    "radmitnahme": "Ja"
  },
  {
    "name": "Multitool",
    "categorie": "Car",
    "dauer": "Kurztrip",
    "verkehrsmittel": "Flugzeug",
    "region": "Italien",
    "gruppengre": "klein",
    "unterkunft": "Hotel",
    "radmitnahme": "Nein"
  }