Invalid hook call - reactjs

Question

It looks like a common problem but I can't solve it. I'm using React, TypeScript and Material-UI. All together do not work if I'm using classes (that's what TS is for). Here is my minimal example that is not working:
File RTaskForm.tsx
import * as React from "react"
import {Task, TaskProcessor} from "./Task"
import { makeStyles, Grid, TextField } from '#material-ui/core'
const styles = makeStyles(theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
},
dense: {
marginTop: theme.spacing(2),
},
menu: {
width: 200,
},
}));
export class RTaskForm extends React.Component<
{prefix: string},
{task: Task}> {
constructor(props: any) {
super(props)
this.state = {
task: TaskProcessor.tasks(false)[1]
}
}
render() {
const classes = styles()
return (
<form className={classes.container} noValidate autoComplete="off">
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
required
id="filled-required"
label="Required"
defaultValue="Hello World"
className={classes.textField}
margin="normal"
variant="filled"
/>
</Grid>
</Grid>
</form>
)
}
}
File index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { RTaskForm } from "./RTaskForm"
ReactDOM.render(<div id="root">
<RTaskForm prefix="Hi"/>
</div>, document.getElementById('root'));
File Task.ts (only two classes to allow compiling)
export class Task extends Map<string, string> {
static emptyTask() {
return new Task()
}
}
export class TaskProcessor {
static tasks(b: boolean): Task[] {
return [Task.emptyTask()]
}
}
I know I have to use withStyles instead of makeStyles, but I have to provide a function parameter for theme, null is not accepted.
Happy to get some help, thanks.
Edit: In the browser I get this error message (line 36 marked):
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See "cannot write the link here" for tips about how to debug and fix this problem.
3 stack frames were collapsed.
render
src/RTaskForm.tsx:36
33 | }
34 |
35 | render() {
36 | const classes = styles()
| ^ 37 | return (
38 | <form className={classes.container} noValidate autoComplete="off">
39 | <Grid container spacing={2}>
View compiled