Answers for "validateDOMNesting(...): <div> cannot appear as a descendant of <p>."

validateDOMNesting(...): <div> cannot appear as a descendant of <p>

<Typography component={'span'} variant={'body2'}>

validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

<p>
   <div>...</div>
</p>
//According to this document, a <p></p> tag can only contain inline elements. That means putting a <div></div> tag inside it should be improper, since the div tag is a block element. Improper nesting might cause glitches like rendering extra tags, which can affect your javascript and css.

//If you want to get rid of this warning, you might want to customize the ReactTooltip component, or wait for the creator to fix this warning.
//If you're looking for where this is happening, in console you can use:
document.querySelectorAll(" p * div ")
//Here's another version that made finding the item more verbose for me 
document.querySelectorAll("p > div")