Estoy tratando de manejar una acción de clic simple, estoy usando componentes basados en clases y vinculé el método y usé "esto" según la documentación, pero ocurre un error que dice que no puedo leer las propiedades de handleCategory, aquí está mi código

 import React from 'react'; import classes from '../css/Landing.module.css'; import mainClasses from '../../MainCss/MainClasses.module.css'; import { LOAD_CATEGORIES } from '../../graphql/queries'; export default class Landing extends React.Component { constructor(props) { super(props); this.state = { categories: [], loading: true, category: null, }; this.handleCategory = this.handleCategory.bind(this); } async componentDidMount() { const { client } = this.props; const { data } = await client.query({ query: LOAD_CATEGORIES }); const { categories } = data; this.setState((prevState) => ({ ...prevState, categories: categories, loading: false, category: categories[0]?.name })); } handleCategory(e) { this.setState((prevState) => ({ ...prevState, category: e.target.value })); } renderCategory(category) { return ( <option onClick={this.handleCategory} key={category.name} value={category.name}> {category.name} </option> ); } render() { return ( <div className={`${classes.root} ${mainClasses.container} ${mainClasses.column}`}> <div className={`${mainClasses.container} ${mainClasses.row}`}> <label className={classes.categorylabel}>Choose Category</label> {this.state.loading ? 'loading' : <select className={classes.categorymenu}>{this.state.categories.map(this.renderCategory)}</select>} </div> <div>{this.state.category}</div> </div> ); } }