[docs][base] Update useMenu and useMenuItem hooks demo

[ZeeshanTamboli]

• I have followed (at least) the PR section of the contributing guide.

Update useMenu and useMenuItem hooks demo which in turn fixes #31981. See #31981 (comment).

---

Before: https://mui.com/base/react-menu

After: https://deploy-preview-34166--material-ui.netlify.app/base/react-menu

---

I've approved the Argos build

Preview: https://deploy-preview-34166--material-ui.netlify.app/base/react-menu/#hooks

[mui-bot]

No bundle size changes

Generated by 🚫 dangerJS against 8a3cc07

[mnajdova]

Pressing esc should close the menu, similarly to the demos that use the unstyled component

[ZeeshanTamboli]

Pressing esc should close the menu, similarly to the demos that use the unstyled component

Nice catch. Done.

[mnajdova]

One last thing, we should focus the trigger button when the menu closes, again similar to the unstyled component demo, maybe by using something like:

  const close = () => {
    setAnchorEl(null);
    buttonRef.current!.focus();
  };

cc @danilo-leal to check if we need to add some focus indicator styles on the button/menu items.

[mnajdova]

Looks great thanks! cc @danilo-leal we may wanna revisit the focus styles on the demos in general in the MUI Base docs.