Пользовательский интерфейс панели поиска в ReactJS с использованием ввода html

Question

Как я могу создать такой пользовательский интерфейс, где я набираю что-то, что он ищет / вводит в React из api, я использовал ax ios для выборки данных, и я также использовал токен отмены. Он также может настраиваться в соответствии с моим результатом, предположим, что мой api дает мне массив из 10, поэтому он будет расширяться, а если он даст мне 5, то он сжимается.

 var CancelToken = axios.CancelToken;
  var cancel;

  function handleResult(value) {
    if (cancel !== undefined) {
      cancel();
    }
    axios
      .get(
        `https://example.com/search`,
        {
          cancelToken: new CancelToken(function executor(c) {
            // An executor function receives a cancel function as a parameter
            cancel = c;
          }),
          params: {
            q: value,
          },
        }
      )
      .then((response) => {
        console.log(response.data.hits.hits);
        setList(response.data.hits.hits);
      })
      .catch((error) => {
        console.log(error);
      });
  }

Как это сделать?