получить значение из ввода, использовать значение из ввода для запроса данных из Firestore

Question

Я пытаюсь выяснить, как визуализировать данные из firebase, используя входные данные от пользователя, чтобы получить указанный c набор данных, связанных с входными данными. Мне нужно иметь возможность получить входной или контрольный номер, поместить его в функцию firebase where(), а затем отобразить данные во внешнем интерфейсе.

SingleQuery() - это то, что дескриптор запрашивает данные из моей базы данных Firestore

SingleQuery ()

//Code to Query data from Database
function SingleQuery() {
  const [drivers, setDrivers] = useState([]);

  useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("drivers")
      .where("controlNumber", "==", "{{{put control number here}}}") //get data according to control number
      .onSnapshot(snapshot => {
        const newDriver = snapshot.docs.map(doc => {
          return {
            // returns a new Object
            id: doc.id,
            ...doc.data()
          };
        });
        setDrivers(newDriver);
      });

    return () => unsubscribe();
  }, []);

  return drivers;
}

Код ниже - это моя форма, которая является просто текстовым вводом.

        <div className="searchBar" class="input-group-sm">
          <form>
            <input
              type="text"
              name="userInput"
              className="form-control"
              aria-label="Small"
              aria-describedby="inputGroup-sizing-sm"
              placeholder="Control Number"
              id="controlNum"
            />
            <br />
            <input className="btn btn-primary" type="submit" value="Submit" />
          </form>
        </div>