Модальные окна кнопок действий в React DataTable

Question

У меня есть кнопки действий в моем компоненте-таблице-реакции-данных, у одного есть функция удаления. Перед удалением элемента должно появиться модальное окно для подтверждения удаления.

Моя проблема в том, что всякий раз, когда я пытаюсь удалить, все модальные окна каждого элемента в списке отображаются и складываются в фоновом режиме. отображение только модального окна указанного c элемента, который я выбрал.

Здесь указывается, что все модальные окна отображаются в фоновом режиме:

Итак, после того, как я удалю элемент № 5, появится модальное окно для элемента № 4.

Вот мой код для столбца моей таблицы-реакции-данных и действия кнопка:

const columns = useMemo(() => [
    {
      name: 'Project Name',
      selector: 'name',
      sortable: true,
    },
    {
      //Actions for every project
      cell: (row) => (
        <ButtonGroup>
          {/* Button for deleting a specific project*/}
          <Button size='sm' onClick={deletetoggle}>
            Delete
          </Button>
          <Modal isOpen={deleteModal} toggle={deletetoggle}>
            <ModalHeader toggle={deletetoggle}>Delete Project</ModalHeader>
            <ModalBody>Are you sure to delete project {row.id}?</ModalBody>
            <ModalFooter>
              <Button size='sm' onClick={() => deleteProjectMethod(row.id)}>
                Delete
              </Button>
              <Button size='sm' onClick={deletetoggle}>
                Cancel
              </Button>
            </ModalFooter>
          </Modal>
        </ButtonGroup>
      ),
    },
  ]);