OnClick Function does not work on Chrome?

I am trying to use onClick function on react.js HTML select option and it works perfectly on Firefox but not on Chrome. How can I make it work in Chrome? Here is my code so far:

import React, { Component } from "react";
import DateRangePicker from "react-daterange-picker";
import "react-daterange-picker/dist/css/react-calendar.css";
import originalMoment from "moment";

export class Filter extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
isOpen: false,};
  }

 onToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };


  render() {
    return (
      <div className="filter_range">
        <select
          class="form-control donn"
          name="today" 
        >
          <option selected disabled hidden>
            Choose{" "}
          </option>
          <option value="today">Today</option>
          <option value="yesturday">Yesterday</option>
          <option>Last Week</option>
          <option value="month">Last Month</option>
          <option>Last Quarter</option>
          <option value="year">Last Year</option>
          <option value="">Overall</option>
          <option value="" onClick={this.onToggle}>
           Custom
          </option>
        </select>

        {this.state.isOpen && (
          <DateRangePicker
            value={this.props.value}
            onSelect={this.props.change}
            singleDateRange={true}
            isOpen={false}
            maximumDate={new Date()}
            closeCalendar={true}
            numberOfCalendars={2}
            showLegend={true}
            locale={originalMoment().locale()}
          />
        )}
      </div>
    );
  }
}

export default Filter;

Answer

Try to use onChange instead of onClick for select element.

<select class="form-control donn" name="today" onChange={handleChange}>

Just add value to your custom option and check for it in the if statement

<option value="custom">
  Custom
</option>

export class Filter extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      isOpen: false,
    };
  }

  handleChange = (event) => {
    if (event.target.value === "custom") {
      this.setState({ isOpen: !this.state.isOpen });
    }
  };

  render() {
    return (
      <div className="filter_range">
        <select class="form-control donn" name="today" onChange={handleChange}>
          <option selected disabled hidden>
            Choose{" "}
          </option>
          <option value="today">Today</option>
          <option value="yesturday">Yesterday</option>
          <option>Last Week</option>
          <option value="month">Last Month</option>
          <option>Last Quarter</option>
          <option value="year">Last Year</option>
          <option value="">Overall</option>
          <option value="custom">
            Custom
          </option>
        </select>

        {this.state.isOpen && (
          <DateRangePicker
            value={this.props.value}
            onSelect={this.props.change}
            singleDateRange={true}
            isOpen={false}
            maximumDate={new Date()}
            closeCalendar={true}
            numberOfCalendars={2}
            showLegend={true}
            locale={originalMoment().locale()}
          />
        )}
      </div>
    );
  }
}

export default Filter;