_react.default.useContext is not a function

Question

• I am using material ui stepper.
• I used from there site but its broken
• so I debugged and gave console inside VerticalLinearStepper method.
• its printting a method at this line console.log("useStyles----->", useStyles);
• but I am facing an error _react.default.useContext is not a function
• can you tell me how to fix it.
• so that in future I will fix it myself.
• providing code snippet and sandbox below

https://codesandbox.io/s/v3o3zmxk90

function VerticalLinearStepper() {
  console.log("useStyles----->", useStyles);

  const classes = useStyles();

  const [activeStep, setActiveStep] = React.useState(0);
  const steps = getSteps();

  function handleNext() {
    setActiveStep(prevActiveStep => prevActiveStep + 1);
  }

  function handleBack() {
    setActiveStep(prevActiveStep => prevActiveStep - 1);
  }

  function handleReset() {
    setActiveStep(0);
  }

Answer 1

@material-ui/styles has a peer dependency on react >= 16.7.0-alpha.0 and react-dom >= 16.7.0-alpha.0 Update your react and react-dom dependencies to:

"dependencies": {
    "react": "^16.7.0-alpha.2",
    "react-dom": "^16.7.0-alpha.2",
},

Answer 2

From what I can see, you are using a version of React that does not yet have support for hooks (useXXX)

It sometimes confuses me too, but latest as a version in your package.json actually means "Latest stable version".
To use a version that supports hooks, you can use the version next for react as well as react-dom :)