_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",
},

• CrashCodes: "material-ui is deprecated use @material-ui/core instead" only to find out later that component examples for @material-ui/core include @material-ui/styles which depends on unstable version of react :(

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 :)