Ag-Grid Custom filter doesFilterPass not triggering?

Question

I'm trying to implement a custom filter and followed a lot of tutorials, but always end up blocked at doesFilterPass. It does not seems to trigger at all and I'm not sure why since there's no warning or error message. Here's the code.

Everything else like isFilterActive or this.props.filterChangedCallback(); is working

I'm using GridOptions frameworkComponents to register.

frameworkComponents:{
        tqFilter : TQFilter,
    },

Is it a simple checkbox that would trigger a check versus another column.

import React, {Component} from "react";
import ReactDOM from "react-dom";

export default class TQFilter extends Component {
  constructor(props) {
      super(props);

      console.log('The field for this filter is ' + props.colDef.field);

      this.state = {
        checked : false
      };

      this.valueGetter = this.props.valueGetter;

      this.onChange = this.onChange.bind(this);
  }

  isFilterActive() {
    return this.state.checked !== null && this.state.checked !== undefined && this.state.checked !== false;
  }

  doesFilterPass(params) {
    console.log('This does not work?');
    return this.valueGetter(params.node).toString().toUpperCase();
  } 


  onChange(event) {
    let newValue = event.target.checked;

    if(this.state.checked !== newValue)
    {
      this.setState({
        checked: newValue
      }, () => {this.props.filterChangedCallback();
      });
    }
  }

  render() {
    let style = {
        border: "2px solid #22ff22",
        borderRadius: "5px",
        backgroundColor: "#bbffbb",
        width: "200px",
        height: "50px"
    };

    return (
        <div style={style}>Filter: <input type="checkbox" onChange={this.onChange} className="form-control"/></div>
    );
  }
}

Thanks!