I created a program to map thorough some json data and show the data on a drawer,the drawer opens when the button clicked.now the problem with my code is => i want the drawer to show the particular data when the particular button clicked. //json data

[
 {
   "button": 1,
   "text": "clicked button 1"
 },
 {
   "button": 2,
   "text": "clicked button 2"
 }
]

but its shows the same text(clicked button 2) for those two buttons, it should show clicked button 1 when clicked OPEN BOTTOM 1 and clicked button 2 when clicked OPEN BOTTOM 2 //code

  <div>
       {Colors.map((color, index) => {
         const { text } = color;
         return (
           <div>
             <Button onClick={this.toggleDrawer("bottom", true)}>
               Open Bottom {index + 1}
             </Button>
             <SwipeableDrawer anchor="bottom" open={this.state.bottom}>
               <div>
                 <h1>{text}</h1>
                 <button onClick={this.toggleDrawer("bottom", false)}>
                   close
                 </button>
               </div>
             </SwipeableDrawer>
           </div>
         );
       })}
     </div>