Material UI Warning: <div> cannot appear as a descendant of <p>

[bodom0015]

Discovered during review of #29

Seeing the following warning in Chrome's developer console (from several places in Dashboard.tsx):

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Dashboard)
    in div (created by ForwardRef(ButtonBase))
    in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
    in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(ListItem))
    in ForwardRef(ListItem) (created by WithStyles(ForwardRef(ListItem)))
    in WithStyles(ForwardRef(ListItem)) (created by Dashboard)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (created by Dashboard)
    in p (created by ForwardRef(Typography))
    in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
    in WithStyles(ForwardRef(Typography)) (created by TabPanel)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (created by TabPanel)
    in div (created by TabPanel)
    in TabPanel (created by Dashboard)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Dashboard)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (created by Dashboard)
    in div (created by Dashboard)
    in div (created by Dashboard)
    in div (created by Dashboard)
    in Dashboard (created by Context.Consumer)
    in Route
    in Switch
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider
    in ThemeProvider

This is a warning that I have not seen before, perhaps because I have not used Material UI very much?

From what I can tell, some of the Material UI components (such as Typography and Box) default to rendering a <p> tag containing their contents. When these components also have children, this can lead to a situation where the browser is asked to render something like <p><div></div></p>.

Since <p> tags do not usually have complex contents, this can lead to different behavior / appearance across different browsers. This is very situational, making it a bit harder to track down where its happening case-by-case. Furthermore, attempting to fix some of these styles changed the page styling/layout in some cases.

Do either of Typography or Box or related components offer any additional styling or functionality? Is there a reason why we don't use standard span or div (respectively) in these cases? I am not super into the idea of needing to specify component every time, but it seems like the <p> default is problematic in many cases