I'm using react with firebase Data stored in the firebase is imported into useEffect, then setlist state is added, and div is generated as a map. What should I do when I want to give an individual toggle event for each button made with map?

When the toggle event becomes true, if edit is false, I want to output the add component.

my code

  let [list, SetList] = useState([]);
  let [toggle,setToggle] = useState(false);

  useEffect(() => {
   db.collection("title").onSnapshot((snapshot) => {
   let titleArray = snapshot.docs.map((doc) => ({
    ...doc.data(),
  }));
  SetList(titleArray);
}); }, []);

list.map(function(value,index){
 <button type="button" onclick={(e)=>{
  props.dispatch({type:"open"}}>click</button>

  toggle === true 
  ? <Edit/> //component 
  : <add/>  //component 
  })

When I press the first button, I want to change only the first button from false to true and keep the rest of the buttons false.