fix: <p> cannot appear as a descendant of <p>.

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

In some locations we had <Typography variant=“body1”> nested inside another <Typography> this renders 2 <p> tags inside of each-other and that is not valid.
The other way around was having a <Box> that is nested inside of a Typograpühy which also seems to be not valid.

src/components/theme/safeTheme.ts

@@ -81,6 +81,14 @@ const createSafeTheme = (mode: PaletteMode): Theme => {
     ] as Shadows,
     typography,
     components: {
+      MuiTypography: {
+        defaultProps: {
+          variantMapping: {
+            body1: 'div',
+            body2: 'div',
+          },
+        },
+      },
       MuiTableCell: {
         styleOverrides: {
           head: ({ theme }) => ({