To fix div cannot appear as a descendant of p error with React, we should make sure we don’t have divs that are inside p elements.
For instance, we shouldn’t write
<p>
<div>...</div>
</p>
in our React components.
If we’re using the Material UI Typography component, we can change the component prop so that we don’t render a div inside a p element.
To do this, we write
<Typography component={"span"} variant={"body2"}>
...
</Typography>
to set the component prop to 'span' so that Typography doesn’t render a div inside a p element.
