title: MaterialUi custom breakpoints not applied
body: <p>Based on <a href="https://stackoverflow.com/questions/59838973/merge-theme-configuration-settings-in-material-ui">this</a> question, I tried to have a theme that uses a common config file(that should be used by other themes as well). So I figured the breakpoints would be a good starting point since they should be the same across all the themes.</p>
  <p>I have the common part like</p>
  <pre><code>const BREAKPOINTS = {
    xs: 0,
    sm: 768,
    md: 960,
    lg: 1280,
    xl: 1920,
  };
  
  const commonConstants = {
    breakpoints: {
      values: BREAKPOINTS,
    },
  };
  
  export default commonConstants;
  </code></pre>
  <p>Then I create my theme like</p>
  <pre><code>const defaultTheme = responsiveFontSizes(createMuiTheme(myTheme, commonConstants));
  </code></pre>
  <p>If I console.log my theme object, it will display the correct breakpoint values but will not apply them(the default one will be applied). However, if the <code>breakpoint</code> object is added directly inside the theme object<code>myTheme</code> (i.e. not uside of the theme), the correct breakpoints are applied. What am I missing here? If the final theme object has the same structure, why is it working differently?</p>