Estoy tratando de renderizar el siguiente elemento del menú de forma dinámica en función de la categoría, pero atascado no se renderiza correctamente. Es más bien darme un error o mostrar solo un elemento que no se puede filtrar a través de la categoría

 export default const Menu =[ { id: 120, name: "Johnnie Walker ", category: "SPIRITS", price: "$8 per 30ml", description: "Black Label", }, { id: 125, name: "Johnnie Walker (Gold Label)", category: "Drinks", price: "$12 per 30ml", description: "Johnnie Walker (Gold Label)", }, { id: 122, name: "Smirnoff Vodka", category: "SPIRITS", price: "$9 per 30ml", description: "Vodka ", },]

 import React, { useState } from 'react'; import Menu from './Menu'; import styled from 'styled-components'; import { IconContext } from 'react-icons'; import { FiPlus, FiMinus } from 'react-icons/fi'; const AccordionMenu = () => { const [items, setItems] = useState(Menu); const [clicked, setClicked] = useState(false); const filterItem = (categItem) => { const updatedItems = Menu.filter((curElem) => { return curElem.category === categItem; }); setItems(updatedItems); } const toggle = index => { if (clicked === index) { //if clicked question is already active, then close it return setClicked(null); } setClicked(index); }; <IconContext.Provider value={{ color: '#00FFB9', size: '25px' }}> <AccordionSection> <Container> {Data.map((item, index) => { return ( <> <Wrap onClick={() => toggle(index)} key={index}> <h1 onClick={() => filterItem()}>{data.category}</h1> <span>{clicked === index ? <FiMinus /> : <FiPlus />}</span> </Wrap> {clicked === index ? ( <Dropdown> <p>{item.name}</p> <p>{item.description}</p> <p>{item.price}</p> </Dropdown> ) : null} </> ); })} </Container> </AccordionSection> </IconContext.Provider> ); };

Hola, estoy tratando de renderizar el siguiente elemento del menú dinámicamente según la categoría, pero atascado no se renderiza correctamente. Es más bien darme un error o mostrar solo un elemento que no se puede filtrar a través de la categoría