Как фильтровать разные категории данных, используя поиск одновременно в React?

Question

У меня есть конечная точка, которую я использовал для получения четырех разных продуктов, к которым прикреплены данные о клиентах каждого из них. Конечная точка выглядит, например, localhost:9000/products/{product-id}. Я вызываю их сразу, используя крючок useEffect, и они, похоже, извлекаются и отображаются правильно.

Моя основная проблема заключается в том, что я использую те же данные, которые использовались для отображения продуктов и их клиентов, для реализации моей функции поиска путем фильтрации через него, чтобы вернуть только связанные данные клиента. Вместо фильтрации по четырем продуктам, он фильтрует только последний продукт и его клиентов. Я не совсем понимаю, как решить эту проблему, потому что она затрагивает все четыре продукта, но затрагивает только один.

Вот моя реализация:

Панель поиска

import React from "react";
import PropTypes from "prop-types";
import "./Search.css";

const SearchBar = (props) => {
  const handleChange = (event) => {
    props.setSearchTerm(event.target.value);
  };

  return (
    <div className="search-bar">
      <input
        type="search"
        id="search"
        className="search-bar--search"
        placeholder="Start typing to highlight..."
        onChange={handleChange}
        value={props.searchTerm}
      />
    </div>
  );
};

export const searchAlgo = (searchTerm, customers) =>
  searchTerm
    ? Object.values(customers).filter((m) =>
        m.name.toLowerCase().includes(searchTerm.trim().toLocaleLowerCase())
      )
    : [];

SearchBar.propTypes = {
  setSearchTerm: PropTypes.func,
  searchTerm: PropTypes.string
};
export default SearchBar;

Здесь я передаю конечную точку продукта каждому продукту

import React, { useState, useEffect } from "react";
import axios from "axios";
import PropTypes from "prop-types";
import Customer from "./Customer";
import SearchBar, { searchAlgo } from "../Search/Search";

const FetchCustomers = (props) => {
  const [customers, customerUpdater] = useState({});
  const [searchTerm, setSearchTerm] = useState("");
  const [customerData, setCustomerData] = useState();


  var getdataUrl = `${props.id}`;
  useEffect(() => {
    const getData = async () =>
      await axios
        .get(getdataUrl)
        .then((res) => {
          const response = res.data.customers;
          if(typeof response === 'object'){
            customerUpdater(response);
            setCustomerData(res.data.customers);
          }
        })
        .catch((err) => err.res);
    getData();
    setInterval(() => getData(), 30000);
  }, [getdataUrl]);

  var searchResults = searchAlgo(searchTerm, customerData);

  console.log(customerData);
  return (
    <React.Fragment>
      <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
      <Customer response={!searchTerm ? customers : searchResults} />
    </React.Fragment>
  );
};

FetchCustomers.propTypes = {
  id: PropTypes.string.isRequired,
};

export default FetchCustomers;

, где я использую компонент продукта

import React, { useEffect } from "react";
import axios from "axios";
import ProductTile from "./Product";

const FetchProducts = () => {
  const [products, productsUpdater] = React.useState({});

  var getdataUrl = "http://localhost:9000/products";
  useEffect(() => {
    const getData = async () =>
      await axios
        .get(getdataUrl)
        .then((res) => {
          const response = res.data;
          productsUpdater(response);
        })
        .catch((err) => (err.res));
    getData();
  },[getdataUrl]);
  return (
  <ProductTile response={products} />
  );
};

export default FetchProducts;

Компонент продукта

import React from "react";
import PropTypes from "prop-types";
import "./Product.css";
import FetchCustomers from "../Customer/FetchCustomers";

const ProductTile = (props) => {
  return (
    <React.Fragment>
      {Object.values(props.response).map((item, key) => (
        <article className="product" key={item.id}>
          <h2 className="product--name">{item.name}</h2>
          <FetchCustomers id={item.self} />
        </article>
      ))}
    </React.Fragment>
  );
};

ProductTile.propTypes = {
  response: PropTypes.oneOfType([
    PropTypes.array,
    PropTypes.object
  ]).isRequired,
};
export default ProductTile;

клиентский компонент

const Customer = (props) => {
  return (
    <React.Fragment>
      {Object.values(props.response).map((item) => (
        <ul className="customers" key={item.id}>
          <li className="customer">
            <div className="customer--info">
              <img
                className="customer--avatar"
                src={item.avatar}
                alt="avatar"
              />
              <h3 className="customer--name">{item.name}</h3>
              <small className="customer--position">{item.job.title}</small>
              <small className="customer--company">{item.job.company}</small>
            </div>
            <blockquote className="customer--quote">{item.quote}</blockquote>
          </li>
        </ul>
      ))}
    </React.Fragment>
  );
};

Customer.propTypes = {
  response: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
};

export default Customer;

Формат данных выглядит следующим образом; localhost:9000/products ответ

[{"id":"supper","self":"http://localhost:9000/products//super","name":"Super","customers":50},{"id":"breakfast","self":"http://localhost:9000/products//breakfast","name":"Breakfast","customers":50},{"id":"lunch","self":"http://localhost:9000/products//lunch","name":"Lunch","customers":50}]

localhost:9000/products/supper

{
    "id": "supper",
    "name": "supper",
    "customers": [
        {
            "id": 622449,
            "name": "Tianna Crooks",
            "dateOfBirth": "1965-01-01T18:53:10.433Z",
            "address": {
                "street": "366 Yundt Hills",
                "city": "Sheldonburgh",
                "zipCode": "20603",
                "country": "Haiti"
            },
            "username": "Tianna.Crooks49",
            "email": "Tianna.Crooks@gmail.com",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/RussellBishop/128.jpg",
            "job": {
                "title": "Chief Response Representative",
                "company": "Cruickshank LLC"
            },
            "quote": "Eum inventore temporibus ut vero."
        }]
}

Любая помощь с этой ошибкой будет очень признательна.