I am running a next.js app, with a file "temp.js" in the /pages directory. My code (temp.js) is as follows:

import React from 'react';
import {Button} from '@mui/material';

class SomeClass extends React.Component{
    state={
        someState: false
    }
    handleClick = async(someValue) => {
        this.setState({ someState: true });
        // await someAsyncFunction(someValue);
        console.log(someValue);
    }
    render(){
        return(
            <Button onClick={()=>this.handleClick(12)}>
                Click me.!
            </Button>
        )
    }
}

export default SomeClass;

Stack Snippet (using button instead of MUI Button, but that doesn't matter):

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

<script type="text/babel" data-presets="es2017,react,stage-3">
class SomeClass extends React.Component{
    state={
        someState: false
    }
    handleClick = async(someValue) => {
        this.setState({ someState: true });
        // await someAsyncFunction(someValue);
        console.log(someValue);
    }
    render(){
        return(
            <button onClick={()=>this.handleClick(12)}>
                Click me.!
            </button>
        )
    }
}

ReactDOM.render(<SomeClass />, document.getElementById("root"));
</script>
<script src="https://unpkg.com/regenerator-runtime@0.13.2/runtime.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.10.3/babel.min.js"></script>

This gives the following error:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'setState')

   7 | }
   8 | handleClick = async(someValue) => {
>  9 |     this.setState({ someState: true });
     |         ^
  10 |     console.log(someValue);
  11 | }
  12 | render(){

This function would work fine if the 'someValue' was not required. Need help. Please ask for any clarifications.