React - Material-UI Modal causing an error with the tabindex - reactjs

Question

I am getting this error when I open a modal on my React app but I can't figure out what it means or how to fix it.
"Warning: Material-UI: the modal content node does not accept focus.
For the benefit of assistive technologies, the tabIndex of the node is being set to "-1"."
<SettingsModal event={this.state.eventDetails} id={this.state.eventDetails.id} delete={this.handleRemoveEvent}/>
returns:
return(
<>
<Paper className={classes.SettingsModal}>
<h1>{this.props.event.name}</h1>
<p>{this.props.event.description}</p>
<p>{this.props.event.id}</p>
<Button onClick={(e) => this.props.delete(this.props.event)}>Delete Event</Button>
</Paper>
</>
);

Answer 1

I've found fix! To remove this error you should wrap your Modal content with DialogContent component like this
import DialogContent from '#material-ui/core/DialogContent';
// ...
render () {
return (
<Modal open={this.state.modalOpened} onClose={() => this.setState({ modalOpened: false, modalContent: null })}>
<DialogContent>
{this.state.modalContent}
</DialogContent>
</Modal>
);
}

Answer 2

All the credit goes to #Idos's comment above since he found the reference to the GitHub Issue. I found that this specific comment was useful.
The wrapping element of the Modal Contents needs to have a prop of
tabIndex: {-1}
In your case looks like you need to do the following:
return(
<Paper tabIndex:{-1} ...>
...
</Paper>
);

Answer 3

i had the same problem. apparently wrapping a div around SettingsModal should fix it.

Answer 4

Following #Wolfman comment, I just used Fragment from React, because it doesn't add any DOM element:
render () {
return (
<Modal open={this.state.modalOpened} onClose={() => this.setState({ modalOpened: false, modalContent: null })}>
<>
{this.state.modalContent}
</>
</Modal>
);
}
Even though, I still don't understand that issue :/