Filter in react js, props loop

import 'bootstrap/dist/css/bootstrap.min.css';
import Logo from './imgs/logo.png';
import Home from '../pages/Home';
import About from '../pages/About';
import Search from '../pages/Search';
import '../pages/Header.css';
import React, { useState } from 'react';
import MenuItem from '../pages/MenuItem';

const uniqueList = () => [...new Set(MenuItem.map((ele) => {
     return ele.category;
  })
)];

let Header = () => {

    const [menuItem, setMenuItem] = useState(MenuItem);
    const [menuCategory, setMenuCategory] = useState(uniqueList);
    let filterItem = (categories) => {
          let updatedMenu = MenuItem.filter((curElem) => {
              return curElem.category === categories;
          });
          setMenuItem(updatedMenu);
    }
    return(
       <div className="container-fluid">
              <header>
                  <ul>
                     {
                        categoryList.map((ele) => {
                             return(
                                 <> 
                                   <li><button onClick={() => filterItem(ele)}>{ele}</button></li> 
                                 </>
                              ) }) }

                               <li><button onClick={() => setMenuItem(MenuItem)}>All</button></li>                 
                           </ul>               
                     </header>               
                        <Home menuItem = {menuItem} />  
                     </div>     
               ) } 

     export default Filter;

import React from "react";

const MenuItem = [

{
    id: 1,
    name: 'Samosha',
    category: 'breakfast',
    price: 200
},

{
    id: 2,
    name: 'Itely',
    category: 'lunch',
    price: 250
},

{
    id: 3,
    name: 'Fish Carry',
    category: 'dinner',
    price: 400
},

];

export default MenuItem;

import React from 'react';
import MenuItem from "./MenuItem";

let Home = ({menuItem}) => {
    return (
        <>
           {
              menuItem.map((curEle) => {
                const {id, name, category, price} = curEle;
                return(
                    <>
                    <div key={id}>
                    <h1>ID: {id}</h1>
                    <h1>Name: {name}</h1>
                    <h1>Category: {category}</h1>
                    <h1>Price: {price}</h1>
                    </div>
                    </>
                )
              })
           }

        </>

    )

}

export default Home;