Not abel to create multiple buttons based on category ,instead only one button is create ,help please?

Hi Everyone ,i need your help in react problem ,my problem is i want to create multiple buttons based on filterItems .but only one button is created ,can somebody suugest the other way round to create buttons for each category ,not one button groupped together as in the image

my code

APP>js

*import* React, { useState } *from* 'react';

*import* Menu *from* './Menu';

*import* Categories *from* './Categories';

*import* items *from* './data';

const allCategories = ['all',...new Set(items.map((item)=> item.category))]

console.log(allCategories)

function App() {

const [menuItems ,setMenuItems] = useState(items)

const [categories,setCategories] = useState([allCategories])

const filterItems = (category) => {

*if*(category === "all"){

setMenuItems(items)

*return*;

}

const newItems = items.filter((item) => item.category === category)

setMenuItems(newItems)

}

*return* <main>

<section *className*="menu section">

<div *className*="title">

<h2>Menu</h2>

<div *className*="underline"></div>

</div>

<Categories *categories* = {categories} *filterItems* ={filterItems} />

<Menu *items*={menuItems}/>

</section>

</main>;

}

*export* *default* App;

*import* React, { useState } *from* 'react';

*import* Menu *from* './Menu';

*import* Categories *from* './Categories';

*import* items *from* './data';

const allCategories = ['all',...new Set(items.map((item)=> item.category))]

console.log(allCategories)

function App() {

const [menuItems ,setMenuItems] = useState(items)

const [categories,setCategories] = useState([allCategories])

const filterItems = (category) => {

*if*(category === "all"){

setMenuItems(items)

*return*;

}

const newItems = items.filter((item) => item.category === category)

setMenuItems(newItems)

}

*return* <main>

<section *className*="menu section">

<div *className*="title">

<h2>Menu</h2>

<div *className*="underline"></div>

</div>

<Categories *categories* = {categories} *filterItems* ={filterItems} />

<Menu *items*={menuItems}/>

</section>

</main>;

}

*export* *default* App;

**categories.js**

*import* React *from* 'react';

const Categories = ({categories,filterItems}) => {

*return*(

<div *className* = "btn-container">

{categories.map((category,index) => {

*return*(

<button

*type*="button"

*className* = "filter-btn"

*key* = {index}

*onClick* = {() => filterItems(category)}>

{category}</button>

)

}

)

}

</div>

)

}

*export* *default* Categories

Menu.js

*import* React *from* 'react';

const Menu = ({items}) => {

*return*(<div *className* = "section-center">

{items.map((menuItem) => {

const {id,title,img,desc,price} = menuItem;

*return* (<article *key* ={id} *className* = "menu-item">

<img *src*={img} *alt* = {title} *className* = "photo"></img>

<div *className*="item-info">

<header>

<h4>{title}</h4>

<h4 *className*="price">${price}</h4>

</header>

<p *className* = "item-text">{desc}</p>

</div>

</article>)

})}

</div>)}

*export* *default* Menu;

data.js


const menu = [

{

id: 1,

title: 'buttermilk pancakes',

category: 'breakfast',

price: 15.99,

img: './images/item-1.jpeg',

desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,

},

{

id: 2,

title: 'diner double',

category: 'lunch',

price: 13.99,

img: './images/item-2.jpeg',

desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,

},

{

id: 3,

title: 'godzilla milkshake',

category: 'shakes',

price: 6.99,

img: './images/item-3.jpeg',

desc: `ombucha chillwave fanny pack 3 wolf moon street art photo booth before they sold out organic viral.`,

},

{

id: 4,

title: 'country delight',

category: 'breakfast',

price: 20.99,

img: './images/item-4.jpeg',

desc: `Shabby chic keffiyeh neutra snackwave pork belly shoreditch. Prism austin mlkshk truffaut, `,

},

{

id: 5,

title: 'egg attack',

category: 'lunch',

price: 22.99,

img: './images/item-5.jpeg',

desc: `franzen vegan pabst bicycle rights kickstarter pinterest meditation farm-to-table 90's pop-up `,

},

{

id: 6,

title: 'oreo dream',

category: 'shakes',

price: 18.99,

img: './images/item-6.jpeg',

desc: `Portland chicharrones ethical edison bulb, palo santo craft beer chia heirloom iPhone everyday`,

},

{

id: 7,

title: 'bacon overflow',

category: 'breakfast',

price: 8.99,

img: './images/item-7.jpeg',

desc: `carry jianbing normcore freegan. Viral single-origin coffee live-edge, pork belly cloud bread iceland put a bird `,

},

{

id: 8,

title: 'american classic',

category: 'lunch',

price: 12.99,

img: './images/item-8.jpeg',

desc: `on it tumblr kickstarter thundercats migas everyday carry squid palo santo leggings. Food truck truffaut `,

},

{

id: 9,

title: 'quarantine buddy',

category: 'shakes',

price: 16.99,

img: './images/item-9.jpeg',

desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,

},

];

*export* *default* menu;

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').