React useState crashes - asp.net

Question

I'm trying to implement a simple menu with ASP.net core 2.1, Typescript 3.2.1, material-ui 3.8.3 and React 16.7.0. When I run the application it crashes on the line with useState with the error TypeError: react__WEBPACK_IMPORTED_MODULE_1___default.a.useState is not a function.
import React from 'react';
import { Link } from 'react-router-dom';
import { withStyles } from '#material-ui/core/styles'
import IconButton from '#material-ui/core/IconButton'
import Menu from '#material-ui/core/Menu';
import MenuItem from '#material-ui/core/MenuItem';
import MenuIcon from '#material-ui/icons/Menu'
function TopbarMenu(props: any) {
const { classes } = props
const [anchorEl, setAnchorEl] = React.useState(null); // Crashes here. Compiled line becomes: var _React$useState = react__WEBPACK_IMPORTED_MODULE_1___default.a.useState(null),
function handleClick(event: any) {
console.log(event.currentTarget)
setAnchorEl(event.currentTarget);
}
function handleClose() {
setAnchorEl(null);
}
return (
<div>
<IconButton onClick={handleClick} className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
<MenuItem onClick={handleClick}><Link to={'/orderform'}>Orderform</Link></MenuItem>
<MenuItem onClick={handleClick}><Link to={'/products'}>Products</Link></MenuItem>
<MenuItem onClick={handleClick}><Link to={'/customers'}>Customers</Link></MenuItem>
<MenuItem onClick={handleClick}><Link to={'/licenses'}>Expiring Licenses</Link></MenuItem>
</Menu>
</div>
);
}
const styles = {
menuButton: {
marginLeft: -12,
marginRight: 20,
},
}
export default withStyles(styles)(TopbarMenu)
What am I missing here?
I'm following material-ui's documentation found here: https://material-ui.com/demos/menus/#simple-menu

Answer 1

Edit
Side notes:
Always use Hooks at the top level of your React function.
See rules of hooks
//Not that bad
const { classes } = props
const [anchorEl, setAnchorEl] = React.useState(null);
//Preferably (in my opinion)
const [anchorEl, setAnchorEl] = React.useState(null);
const { classes } = props
Answer
React Hooks are available from React 16.7.0-alpha, reactconf2018. Now currently available in React v16.8.0-alpha.0.

Answer 2

Try this
const [anchorEl, setAnchorEl] = React.useState<Element|null>(null);