How to show a modal from inside a MUI Menuitem

Question

I am trying to keep all the modal opening & closing logic inside the Menuitem component, as otherwise I have to write that login separately in multiple files wherever I am using this menuItem, & whenever I click the MenuItem the menu closes along with all the MenuItem, but due to this the modal is also not rendered (i see it opening for a split second then it's gone) so how can I keep the modal showing without removing that logic outside the component.

& here I am using the mui "Dialog" for showing the modal

const SyncIntegration = ({ service }) => {
  const [showManualSyncModal, setShowManualSyncModal] = useState(false);
  useEffect(() => {
    console.log(showManualSyncModal);
  }, [showManualSyncModal]);
  return (
    <>
      <MenuItem
        style={{
          display: "flex",
          padding: "0.5vw 1vw",
        }}
        onClick={() => {
          setShowManualSyncModal(true);
          // handleClose();
        }}
      >
        Sync Now
      </MenuItem>
      {showManualSyncModal && (
        <ManualSyncModal
          integrationType={service}
          showModal={setShowManualSyncModal}
        />
      )}
    </>
  );
};