import React, { useState, useRef } from "react"; import Categorias from "../../Categotrias/Categorias"; import { CardProduct, Container, ContainerCardProducts, Titulo, ContainerImg } from "./StyleProductos"; import { useSelector } from "react-redux"; function Productos() { const [selectedCategory, setSelectedCategory] = useState(null); const productRef = useRef(); const doScroll = () => { window.scrollTo( productRef.current.getBoundingClientRect().x, productRef.current.getBoundingClientRect().y ); }; const { products } = useSelector((state) => state.products); // Filtrar productos basados en la categoría seleccionada const filteredProducts = selectedCategory ? products.filter((prod) => prod.category.toLowerCase() === selectedCategory.toLowerCase()) : products; console.log("Selected Category:", selectedCategory); console.log("Filtered Products:", filteredProducts); return ( <> <Container> <Categorias doScroll={doScroll} onSelectCategory={(category) => setSelectedCategory(category)} selectedCategory={selectedCategory} // Pasamos selectedCategory como prop /> <Titulo> <h1>CATALOGO</h1> </Titulo> <ContainerCardProducts ref={productRef}> {filteredProducts.map((prod) => ( <CardProduct key={prod.id}> <h2>{prod.title}</h2> <ContainerImg> <img className="img1" src={prod.img} alt={prod.title} /> <img className="img2" src={prod.img2} alt={prod.title} /> </ContainerImg> <p>MODELO: {prod.modelo}</p> <h3>US$: {prod.price}</h3> <button onClick={(e) => e.preventDefault()}>Agregar al carro</button> </CardProduct> ))} </ContainerCardProducts> </Container> </> ); } export default Productos; en esta codigo no esta funcionando, cuando hago clic en una categoria no me muestra los productos de esa categoria

ript
import React, { useState, useRef } from "react";
import Categorias from "./Categorias";
import { useDispatch } from "react-redux";
import { getCategorias } from "../../../../../../../../../../../../../../../..