I'm trying to handle simple click action , I'm using class based components and I binded the method and used "this" as per documentation but an error occurs sayin cannot read properties of handleCategory , here's my code

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>
        );
    }
}