I posted this here because I am relatively new to React and didn't know what exactly should I google. In my React project, I have a kendo grid that has a custom column named OPTIONS, like this:

 <Grid onDataStateChange={onDataStateChange}
            data={result}
            {...{skip:0, take:13}}>
            <GridColumn cell={CommandCell} title="Options"/>
            <GridColumn field="session_id" title="Session" filter='text'/>
            <GridColumn field="sn_zag_id" title="Service" filter='text'/>

The Option column is defined like this:

const [visible2, setVisible2] = useState(false);
const [snZagId, setSnZagId] = useState();

const toggleDialogPrilog = (props) => {
    setVisible2(!visible2);
    setSnZagId(props.dataItem.sn_zag_id)
  }

const CommandCell = (props) => <Options {...props}/>

const Options= (props) => {
  return <td className="k-command-cell">
  <div style={{marginTop:'2%'}}>
       <Button style={{width:'8vw',marginTop:'2%'}}
        onClick={()=>toggleDialogPrilog(props)}>
        Add
        </Button></>}
  </div>
  { visible2 && 
       <Dialog onClose={()=> toggleDialogPrilog()} title={"Add"} style={{width:'50%'}}>
    <Prilog snZagId={snZagId}/>
    </Dialog>
  }
  </td>;}

So, In the option column I have a button ADD that, when it's clicked, opens a Dialog with PRILOG component inside it. The grid that I am talking about is big, made up of pages of 13 rows. Everything works perfectly, so when I click on the Add button, the dialog is open with custom material for that row. But the thing is, if I open the console/inspect, I can see that when I click add, 13 dialogs are open at the same time:

I am aware to some point that when I click Add, all dialogs are rendered bcz I send props, but I don't know how to stop it. In other words, how can I modify my code so that only one(1) dialog opens when I click Add?