Estoy trabajando en una aplicación de pila de comercio electrónico MERN. Tengo una API que devuelve todos los Productos que tengo de mi MongoDB. Adjunté un registro de consola de la matriz de productos de la API en la imagen a continuación.

Ahora mi pregunta aquí es, estoy usando useEffect() en los productos devueltos por la API en la base de datos, de modo que en la interfaz, si un usuario elige una opción de selección, representa y solo trae los elementos relacionados con esa opción de selección. He agregado el código useEffect a continuación para el cual estoy aplicando un filtro:

 const [filteredProducts, setFilteredProducts] = useState([]); useEffect(() => { cat && setFilteredProducts( products.filter((item) => Object.entries(filters).every(([key, value]) => item[key].includes(value) ) ) ); }, [products, cat, filters]);

Así que una pequeña explicación de las variables son:

productos: matriz de la API anterior. He añadido el primer índice a continuación.

 { "products": [ { "_id": "6208edc07351ca41b4656fc7", "title": "Hisense Microwave", "desc": "A Cool Smart Microwave", "image": "https://www.pngarts.com/files/3/Women-Jacket-PNG-High-Quality-Image.png", "categories": [ "Heaters", "Microwaves", "Home Appliances" ], "brand": [ "Hisense" ], "color": [ "White", "Black", "Gray" ], "price": 500, "inStock": true, "createdAt": "2022-02-13T11:38:40.861Z", "updatedAt": "2022-02-13T11:38:40.861Z", "__v": 0 } ]}

cat: es la categoría en la que hizo clic un usuario que devolvió la matriz de productos [categorías]. Por ejemplo: calentadores, microondas, electrodomésticos

filtros: es un estado de uso de React que devuelve lo que el usuario quiere filtrar del menú desplegable. He adjuntado una imagen de la variable de filtros useState de reacción

Pero mi error es tener en la consola muestra que el filtro no es una función. He leído sobre esto, pero no encuentro una forma de evitarlo. Por favor, cualquier ayuda será muy apreciada.