Untitled

export const MainParent = ({
  row,
}: DataDisplayRowActionsProps) => {
  const [isMenuVisible, setMenuVisibility] = useState<boolean>(false);
  const menuRef = useRef<HTMLDivElement>(null);

  const {
    modalRef: projectDetailsModalRef,
    isOpen: isProjectDetailsModalVisible,
    openModal: openProjectDetailsModal,
    closeModal: closeProjectDetailsModal,
  } = useModal();

  const {
    modalRef: assignResourceModalRef,
    isOpen: isAssignResourceModalVisible,
    openModal: openAssignResourceModal,
    closeModal: closeAssignResourceModal,
  } = useModal();

  const {
    modalRef: confirmResourceModalRef,
    isOpen: isConfirmResourceModalVisible,
    openModal: openConfirmResourceModal,
    closeModal: closeConfirmResourceModal,
  } = useModal();

  const {
    modalRef: historyModalRef,
    isOpen: isHistoryModalVisible,
    openModal: openHistoryModal,
    closeModal: closeHistoryModal,
  } = useModal();

  const {
    modalRef: suspendModalRef,
    isOpen: isSuspendModalVisible,
    openModal: openSuspendModal,
    closeModal: closeSuspendModal,
  } = useModal();

  const {
    modalRef: deleteAccountModalRef,
    isOpen: isDeleteAccountModalVisible,
    openModal: openDeleteAccountModal,
    closeModal: closeDeleteAccountModal,
  } = useModal();

    ~~~I removed some unrelated code from here ~~~

  return (
    <div>
      {isMenuVisible && <MenuComponent />}
      {isProjectDetailsModalVisible && (
        <Modal modalRef={projectDetailsModalRef}>
          <DataDisplayProjectDetailsModal
            projects={row.original.projects}
            closeModal={closeProjectDetailsModal}
            openAssignResourceModal={openAssignResourceModal}
            closeAssignResourceModal={closeAssignResourceModal}
          />
        </Modal>
      )}
      {isAssignResourceModalVisible && (
        <Modal modalRef={assignResourceModalRef}>
          <DataDisplayAssignResourceModal
            projects={dataDisplayProjectsData}
            closeModal={closeAssignResourceModal}
            resources={extractResources(dataDisplayProjectsData)}
            dataDisplayName={row.original.name}
            openConfirmResourceModal={openConfirmResourceModal}
          />
        </Modal>
      )}
      {isHistoryModalVisible && (
        <Modal modalRef={historyModalRef}>
          <DataDisplayHistoryModal
            logs={row.original.logs}
            closeModal={closeHistoryModal}
          />
        </Modal>
      )}
      {isSuspendModalVisible && (
        <Modal modalRef={suspendModalRef}>
          <DataDisplaySuspendModal closeModal={closeSuspendModal} />
        </Modal>
      )}
      {isDeleteAccountModalVisible && (
        <Modal modalRef={deleteAccountModalRef}>
          <DataDisplayDeleteAccountModal
            closeModal={closeDeleteAccountModal}
          />
        </Modal>
      )}
    </div>
  );
};