React Firestore Dynamic Query From User Input Table

I am trying to build out a table in React that is populated from Firestore, but want to only bring in data that matches with a user's predefined criteria (stored in another collection). This table for instance would show a list of applications that displays each application's City, Credit Score, Address, etc. Where the user can build out filters to return applications with a credit score > 650 and city == New York.

I am passing this in from a parent as this.props.rules which contains 3 columns corresponding with the where search criteria, for instance ['creditScore', '>',650].

onQueryUpdate is my attempt at building out that dynamic query from the rules matrix but to no avail. What would be the correct way to build out this dynamic querying based off multiple user defined criteria?

Many thanks

class SubmissionsFiltered extends Component {
  constructor(props) {
    super(props);
    this.ref = firebase.db.collection('Applications').where('companyID','==','');
    this.unsubscribe = null;
    this.state = {
      applications: [],
      query:""
    };
  }

  onQueryUpdate = () => {
    let query = this.ref;
    if(this.props.rules.length > 0) {
      let i = 0;
      while(i < this.props.rules.length){
        query = query.where(this.props.rules[i][0],this.props.rules[i][1],this.props.rules[i][2])
      };
    };
    this.setState({
      query
    });
  }



  onCollectionUpdate = (querySnapshot) => {
    const applications = [];
    querySnapshot.forEach((doc) => {
      const { address,city,postalCode,creditScore} = doc.data();
      applications.push({
        key: doc.id,
        doc, // DocumentSnapshot
        address,
        city,
        postalCode,
        creditScore,
      });
    });
    this.setState({
      applications
   });
  }

  componentDidMount() {
    this.unsubscribe = this.state.query.onSnapshot(this.onCollectionUpdate);

  }
render() {
    return (
      <>
        <div className="container-sm">
          <div className="panel panel-default">
            <div className="panel-heading">
              <h3 className="panel-title">
                Applications
              </h3>
            </div>
            <div className="panel-body">
              <table className="table table-stripe">
                <thead>
                  <tr>
                    <th>Address</th>
                    <th>City</th>
                    <th>Credit Score</th>
                  </tr>
                </thead>
                <tbody>
                  {this.state.applications.map(application =>
                    <tr>
                      <td><Link to={`/app/${application.key}`}>{application.address}</Link></td>
                      <td>{application.city}</td>
                      <td>{application.creditScore}</td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default SubmissionsFiltered;