Estoy tratando de crear un sitio web de comercio electrónico utilizando react-bootstrap y para la página de detalles de mi producto quiero mostrar el producto en función del artículo elegido por el usuario que tiene una identificación y una categoría diferentes. Quiero filtrar para que solo muestre el elemento que tiene la misma identificación y categoría, pero no funcionó, todavía muestra todo el elemento solo en función de su categoría. Quiero que se base en la categoría y la identificación. Cómo puedo arreglar eso ?

mi código:

 const ProductList = () => { const { category, id } = useParams() const[productList, setProductList]= useState(); useEffect(() =>{ axios.get(`https://fakestoreapi.com/products`).then(res => { const products = res.data; var filteredCategory = products.filter((productList) => productList.category === category || productList.id === id) setProductList(filteredCategory) }) }, []); console.log() return ( <> <Container fluid> {productList && productList.map(product =>{ const {id, title, price, category,image} = product; return( <Row> <Col lg={3} className="d-flex"> <img src={image} width="50%"></img> </Col> <Col> <h1> {title}</h1> </Col> </Row> ) })} </Container> </> ) }