Issue with closing dialog box when clicking on NavLink in React

I’m currently working on a React application and have implemented a dialog box using the Dialog component from the Material-UI library. The dialog box contains a navigation menu, and I want it to close when the user clicks on one of the navigation links (NavLink) in desktop mode.

Here’s the relevant code snippet:

// Dialog component code

const [open, setOpen] = useState(false);

// Dialog opening and closing functions

const handleOpen = () => {
  setOpen(true);
};

const handleClose = () => {
  setOpen(false);
};

// JSX code for the dialog box

<Dialog open={open} onClose={handleClose}>
  <div className="dialog-content">
    {/* Navigation links */}
    {navItems.map((item) => (
      <NavLink
        key={item.id}
        to={item.href}
        className="-m-2 block p-2 text-gray-500"
        onClick={handleClose} // Issue here: dialog doesn't close
      >
        {item.name}
      </NavLink>
    ))}
  </div>
</Dialog>

The problem I’m facing is that the dialog box doesn’t close when I click on a NavLink. The onClick handler is correctly invoked, but the dialog remains open. I suspect there might be an issue with how I’m implementing the onClick handler.

I would appreciate any insights or suggestions on how to properly close the dialog box when clicking on a NavLink in React. Thank you in advance for your help!