Nested Modal issue

[timbiles]

Describe the bug
When a modal component is rendered as a MenuItem inside a menu, an input/textarea element is not clickable. You are able to get focus on the input with the tab key, but not by a click of the mouse.

To Reproduce
Steps to reproduce the behavior:

The following is an example of the issue using code sandbox.

1. Go to https://qchhl.csb.app/
2. Open up the mobile viewport. (The specific issue was found using Chrome).
3. Click on one of the dropdown menus.
4. Click on "Open Modal". The modal should pop open with the text saying "Hello World".
5. Try to click on the textarea element on the bottom half of the modal.

Expected behavior
A user should be able to type into the input/textarea element.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.