How to make option/input value filter the matching results from json object?

This is where the option input value needs to be filtered. If you enter "Andre studenter", it will filter out from the data set which of the people who identify as "Andre studenter"

import React, { useState } from "react";
import {useNavigate} from "react-router-dom";
import { data } from "../helpers/data";

export function SearchPerson() {
const [category, setCategory] = useState("");
const [interests, setInterests] = useState("");
const [location, setLocation] = useState("");
const [subjects, setSubjects] = useState("");
const navigate = useNavigate();


function handleSubmit(event) {
event.preventDefault();
navigate("/searchperson/matching");
}

return <div className= "">
  <div class="border-2 rounded-lg border-solid border-mainBgColor max-w-prose">
  <h1 class="mx-16 my-3 p-2 text-xl font-bold">Finn personer</h1>
    <form onSubmit={handleSubmit} className=""> 
    <div>
    <p class="text-textcolorSearchBox text-left align-top ml-16">Leter etter:</p>
      <select class="mx-16 my-3 p-2 border-2 rounded-lg border-solid border-selectBorderColor bg-selectBGcolor w-96" required
        onChange={(e) => setCategory(e.target.value || null)}
        value={category}
      >
        <option value={""}></option>
        <option value={"Andre studenter"}>Andre studenter</option>
        <option value={"Nye venner"}>Nye venner</option>
        <option value={"Grupper"}>Grupper</option>
        <option value={""}></option>
        <option value={""}></option>
        <option value={""}></option>
      </select>
    </div>

This is where I want to output the filtered objects. This is supposed to be a page with "matching results" from the first page.

import React from "react";

import { data } from "../helpers/data";

export function FindPerson(){

  return (
    <div>
      {data.projects.map((project, key) => {
        return <div className="border-solid border-b-4 relative border-dividerColor mx-48 my-10">
            <div key={key} class="py-5 w-24 flex items-center space-x-4">
                <img src={project.image}/>
                <div>
                <h1 key={key} class=" text-xl font-bold">{project.name}</h1>
                <h2 key={key} class="text-sm text-gray-500 dark:text-gray-400">{project.title}</h2>
            </div>
            </div>
            <p key={key} class="py-5">{project.description}</p>
            <div>
            <button class="absolute bottom-5 right-10">Vis profil</button>
            </div>
            <div>
            <button class="absolute bottom-5 right-40">Send melding</button>
            </div>
            </div>
      })}
    </div>
  );
}

and this is where and how the data is stored. The filter value comes from this data set.

export const data = {
projects: [
  {
    name: "Jhonny Jones",
    title: "Student",
    description:"Hei jeg er fattig student som spiser boller og drikker brus. Jeg er 22 år gammel og har mistet alle tennene mine.",
    image: require("../images/maleprofile.png")
  },
  {
    name: "Lille kylling ",
    title: "Professor",
    description:"Hei jeg er fattig student som spiser boller og drikker brus. Jeg er 22 år gammel og har mistet alle tennene mine. Hei jeg er fattig student som spiser boller og drikker brus. Jeg er 22 år gammel og har mistet alle tennene mine. Hei jeg er fattig student som spiser boller og drikker brus. Jeg er 22 år gammel og har mistet alle tennene mine. Hei jeg er fattig student som spiser boller og drikker brus. Jeg er 22 år gammel og har mistet alle tennene mine. Hei jeg er fattig student som spiser boller og drikker brus. Jeg er 22 år gammel og har mistet alle tennene mine.",
    image: require("../images/maleprofile.png")
  },
  {
    name: "Jhonny Jones",
    title: "Andre studenter",
    description:"Hei jeg er fattig student som spiser boller og drikker brus. Jeg er 22 år gammel og har mistet alle tennene mine.",
    image: require("../images/maleprofile.png")
  },