Problem with useDisclouse() in Chakra UI in a forEach loop - reactjs

Question

How can I use useDisclouse() in Chakra with a button in a forEach loop. When I clicked on onClick event a Button it trigger all Buttons.
const {isOpen:isOpenEdit,onOpen:onOpenEdit,onClose:onCloseEdit} = useDisclosure();
...
return (<Tbody>
{!isLoading &&
data.data?.map((row,i) => (
<Tr ref={rows.current[i]=createRef()} key={i}>
<Td>{`$${row.price}`}</Td>
<Td maxW={"10em"} overflow={"hidden"}>
{row.title}
</Td>
<Td maxW={"10em"} overflow={"hidden"}>
{row.description}
</Td>
<Td>{row.brand}</Td>
<Td maxW={"10em"} overflow={"hidden"}>{Date(row.date).toString()}</Td>
<Td>{row.location}</Td>
<Td>
{row.photo}
</Td>
<Td>{row.phones?.toString()}</Td>
<Td>
<ButtonGroup isAttached>
<Button key={row.id} onClick={()=>onOpenEdit()} >Edit</Button>
<EditModal key={i} isOpen={isOpenEdit} onClose={onCloseEdit} id={row.id}/>
</ButtonGroup>
</Td>
</Tr>
))}
</Tbody>)

Answer 1

useDisclosure only allows you to keep track of one boolean value. So for this we need to build something ourselfs.
First we need a state to keep track of the opened modals.
const [isOpenEdits, setIsOpenEdits] = useState({});
Now we need a function which helps us to set the state based on the id of the row.
const toggleIsOpen = (id, isOpen) => {
setIsOpenEdits((prevState) => {
return {
...prevState,
[id]: isOpen,
};
});
};
We can use this toggleIsOpen function in the ButtonGroup component and set the isOpen prop to the value of isOpenEdits[row.id] defaulting to false.
<ButtonGroup isAttached>
<Button key={row.id} onClick={() => toggleIsOpen(row.id, true)}>
Edit
</Button>
<EditModal
key={i}
isOpen={isOpenEdits[row.id] ?? false}
onClose={() => toggleIsOpen(row.id, false)}
id={row.id}
/>
</ButtonGroup>