Checkbox Issues in ReactJS

I'm really stumped on what's happening in this code. I'm trying to have a checkbox in ReactJS. The box doesn't check/uncheck onClick, however it does save your selection as true/false.

Help would be strongly appreciated and I can elaborate if necessary.

The checkbox never is checked, even when you click it and the value has changed from false to true

export default class checkboxEdit extends Component { //sample change
    constructor(props){
        super(props);
        this.onChangeHandler = this.onChangeHandler.bind(this);
        this.onBlur = this.onBlur.bind(this);
    }
   onChangeHandler(event){
        event.preventDefault()
        this.props.onChange({
            target:{
                value: event.target.checked
            }
        });
        if (this.props.onClick && Object.prototype.toString.call(this.props.onClick) == '[object Function]') {
          try {
               this.props.onClick(event);
           } catch (err) {
               console.log('Suppressing error', err);
           }
       }
    }
    
   onBlur(event) {
                 if (this.props.onBlur && Object.prototype.toString.call(this.props.onBlur) == '[object Function]') {
                    this.props.onBlur(event);
         }
                 
                 if (this.props.onBlurChange && Object.prototype.toString.call(this.props.onBlurChange ) == '[object Function]') {
                    this.props.onBlurChange (event);
                }
        }
    
    render() {
        return (
            <p className='form-control-static'>
                <span className='checkbox'>
                    <label style= className='checkbox'>
                       <input style= type='checkbox' 
                        onMouseEnter={this.props.onMouseOver} 
                        onMouseLeave={this.props.onMouseOut} 
                        onChange={this.onChangeHandler}
                        onBlur={this.onBlur}
                        onFocus={this.props.onFocus}
                        aria-required={(this.props.required) ? true : false} 
                        value="on" 
                        checked={(this.props.value) ? "checked" : ""}
                        className='form-check-input' 
                        />
                        <span>{this.props.checkboxText}</span>
                    </label>
                    <small className='form-text text-muted'>{this.props.descriptiveText}</small>
                </span>
            </p>
        );
    }
}