Repository: material-ui
Issue: [styles][makeStyles] Uncaught TypeError: Cannot read property 'refs' of undefined in detach function
Labels: package: styles

<!-- Provide a general summary of the issue in the Title above -->
When using makeStyles hook on the start-up page (e.g.: Login) of a React application, the page doesn't load sometimes in development mode and below error is encountered.

> VM677:176 Uncaught TypeError: Cannot read property 'refs' of undefined
    at detach (eval at <anonymous> (VM17 bundle.js:4698), <anonymous>:176:5)
    at eval (eval at <anonymous> (VM17 bundle.js:4698), <anonymous>:262:9)
    at eval (eval at <anonymous> (VM17 bundle.js:4698), <anonymous>:218:9)
    at HTMLUnknownElement.callCallback (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:188:14)
    at Object.invokeGuardedCallbackDev (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:237:16)
    at invokeGuardedCallback (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:292:31)
    at safelyCallDestroy (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:19650:5)
    at eval (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:20123:21)
    at unstable_runWithPriority (eval at <anonymous> (VM17 bundle.js:1512), <anonymous>:653:12)
    at runWithPriority$1 (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:11061:10)
    at commitUnmount (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:20116:15)
    at commitNestedUnmounts (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:20196:5)
    at unmountHostComponents (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:20476:7)
    at commitDeletion (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:20533:5)
    at commitMutationEffects (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:22813:11)
    at HTMLUnknownElement.callCallback (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:188:14)
    at Object.invokeGuardedCallbackDev (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:237:16)
    at invokeGuardedCallback (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:292:31)
    at commitRootImpl (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:22540:9)
    at unstable_runWithPriority (eval at <anonymous> (VM17 bundle.js:1512), <anonymous>:653:12)
    at runWithPriority$1 (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:11061:10)
    at commitRoot (eval at <anonymous> (VM17 bundle.js:1500), <anonymous>:22412:3)

From Chrome debugger, it seems that, in the makeStyles detach function, an undefined error is thrown for the sheetManager object (see image below).
![UndefinedSheetManager](https://user-images.githubusercontent.com/7274664/77073778-75f4ba00-69f8-11ea-897b-ff7808a9c39e.png)

After the error is thrown, the screen goes white.


<!--
  Thank you very much for contributing to Material-UI by creating an issue! ❤️
  To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯
<!-- Describe what happens instead of the expected behavior. -->
A Uncaught TypeError: Cannot read property 'refs' of undefined appears when the makeStyles detach function is called and sheetManager object in the following line is undefined. Also, the screen of the web application goes white.

`let sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);`

## Expected Behavior 🤔
<!-- Describe what should happen. -->
sheetManager should not be undefined or a guard should be added to the subsequent code using it.

## Steps to Reproduce 🕹
<!--
  Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
  Include code to reproduce, if relevant (which it most likely is).

  You should use the official codesandbox template as a starting point: https://material-ui.com/r/issue-template

  If you have an issue concerning TypeScript please start from this TypeScript playground: https://material-ui.com/r/ts-issue-template

  Issues without some form of live example have a longer response time.
-->
I have not found an exact cause for this, sheetManager is set in attach function, but seems to not be found in a subsequent call to detach. Maybe a missing attach call or refs going to 0. A line below removes the sheetManager from the multiKeyStore.

`multiKeyStore.delete(stylesOptions.sheetsManager, stylesCreator, theme);`

<!--
Steps:
1.
2.
3.
4.
-->

## Context 🔦
I am getting a console error when this happens and the application screen is not loading. On subsequent tab loads, the app reloads.
<!--
  What are you trying to accomplish? How has this issue affected you?
  Providing context helps us come up with a solution that is most useful in the real world.
-->

## Your Environment 🌎

<!--
  Include as many relevant details about the environment with which you experienced the bug.
  If you encounter issues with typescript please include version and tsconfig.
-->

| Tech        | Version |
| ----------- | ------- |
| Material-UI | v4.9.7  |
| React       |   16.13.0  |
| Browser     |  Google Chrome  |
| TypeScript  | No     |
| Babel ES6        |   Yes     |