如何将异步/等待语法与react中的debunce函数一起使用？

尝试创建一个react自动完成组件，并使用debounce函数来减少频繁的api调用。代码如下：

const { useState, useMemo } = React;

function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, ...args), delay);
  }
}

const getApi = (terms) => `https://www.reddit.com/search.json?q=${terms}`;
const Search = () => {
  const DELAY = 500;
  const [text, setText] = useState("");
  const [list, setList] = useState([]);

  const fetchData = useMemo(debounce(async(evt) => {
    const res = await fetch(getApi(evt.target.value));
    const {data} = await res.json();
    setList(data.children.map(d => d.data.title));
  }, DELAY), []);

  return (
    <div>
      <form className="bg-gray-200 p-5">
        <input
          type="text"
          name="text"
          placeholder="search users..."
          value={text}
          onChange={(e) => {
            setText(e.target.value);
            fetchData(e);
            }
          }
          className="bg-white p-2 w-3/4 outline-none"
        />
      </form>
      <ul>
        {list.map(title => <li>{title}</li>)}
      </ul>
    </div>
  );
};

ReactDOM.render(<Search />, document.getElementById("app"));

在我从控制台测试之后，尚未进行api调用。知道哪里出了问题吗？