title: MaterialUI 5 : TypeError: Cannot read properties of undefined (reading 'create')
body: <p>After I created ThemeSetting.tsx context I cannot use
  <code>&lt;Button&gt;&lt;Button&gt;</code>
  and all things that use <code>theme</code> of materialUI
  ReactJS , Typescript</p>
  <p><a href="https://i.stack.imgur.com/nvtll.png" rel="noreferrer">error</a></p>
  <p>TypeError: Cannot read properties of undefined (reading 'create') push../node_modules/@mui/material/Button/Button.js.Object.ownerState.ownerState
  node_modules/@mui/material/Button/Button.js:67</p>
  <pre><code>  64 | minWidth: 64,
    65 | padding: '6px 16px',
    66 | borderRadius: theme.shape.borderRadius,
  &gt; 67 | transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
       | ^  68 |   duration: theme.transitions.duration.short
    69 | }),
    70 | '&amp;:hover': _extends({
  </code></pre>
  <p>and ThemeSetting.tsx</p>
  <pre><code>import { createTheme, ThemeProvider } from &quot;@mui/system&quot;;
  
  export const ThemeContextProvider: React.FC&lt;{}&gt; = ({ children }) =&gt; {
      const theme = createTheme({
          palette: {
              navbar: blue[100],
              tag: {
                  red: red[200],
                  pink: pink[200],
                  purple: purple[200],
                  blue: blue[200],
                  green: green[200],
              },
          },
          typography: {
              fontFamily: [
                  &quot;NotoSans&quot;,
                  &quot;NotoSansThai&quot;,
                  &quot;Arial&quot;,
                  &quot;Roboto&quot;,
                  &quot;'Helvetica Neue'&quot;,
                  &quot;sans-serif&quot;,
              ].join(&quot;,&quot;),
          },
          shape: {
              borderRadius: 15,
          },
      });
  
      return &lt;ThemeProvider theme={theme}&gt;{children}&lt;/ThemeProvider&gt;;
  };
  </code></pre>