How to show a modal(1) when user click buttons(4button with 1modal)

When I click add button I want to show input in React. The problem is add buttons are multiple. Do I need to give id manually?

my li component

<div className="content-children">
          {props.showmodal ? (input modal) : (add btn) 
          }
</div>

my ul component

<ul>
        <Lists  
        setshowmodal={setshowmodal}
        showmodal ={showmodal}
        />

        <Lists  
        setshowmodal={setshowmodal}
        showmodal ={showmodal}
        />
</ul>

you are having two modals. Imagine modals are like screens or routes or fullsize-webpage, they show one at a time. You are using two modals like a screen. (I do use screens as modals). I might do something like this.

const [modal,setModal] = useState('');
const closeModal = ()=> setModal('');
return (
  <ul>
    <List modal={modal} onClick={() => setModal("one")} />
    <List modal={modal} onClick={() => setModal("two")} />
  </ul>
);

// Li component
return modal === "one" ? <Li /> : <Btn />;