Axios все еще возвращает данные после использования AbortController в React

В общем, я пытаюсь понять, что не так с моим кодом, связанным с отменой запроса на публикацию axios. У меня есть форма, через которую пользователь может сделать запрос на поиск фильмов в openai. Пока поиск продолжается, я предоставляю пользователю кнопку отмены, позволяющую прервать поиск и ввести новый поисковый запрос. Если во время тестирования я прерву запрос, я все равно получу данные, и они все равно будут обрабатываться, как если бы запрос не был отменен.

Это происходит в компоненте React, который я посвятил обработке запроса openai. Согласно моему package.json, я использую Axios 9.5.0. Первое, что я делаю внутри компонента, — устанавливаю состояние, а затем:

  const controller = new AbortController();

Вот обработчик, когда пользователь отправляет поиск:

const handleSubmit = async () => {
    (set some states to set up correct user interface)

    try {
      const searchResults = await axios.post(
        "/api/movies/ai-search",
        {
          userRequest: request,
        },
        { signal: controller.signal }
      );
      const jsonResults = JSON.parse(searchResults.data);
      
      (do stuff with the returned data)
      
    } catch (err) {
      if (axios.isCancel(err)) {
        console.info("Request cancelled");
      } else {
        console.info(err);
      }
      
      (set some more states to reflect error message)

      );
    }
  };

А вот обработчик, когда пользователь нажимает кнопку, чтобы отменить текущий поиск:

  const handleSearchCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
    // handler for when user cancels search
    console.info("Cancelling the search") // confirm I made it to the handler
    controller.abort();
    
    (set a couple of states to update the UI)
  };

Одна из проблем, которая, как мне показалось, может заключаться в том, что все настройки состояния: большинство из них создаются из родительского компонента. Может ли это быть причиной проблемы? В любом случае, если я отправлю поиск, а затем отменю его, я получу журнал консоли о том, что нахожусь в правильном обработчике. Но если я подожду еще несколько минут, результаты поиска появятся и будут обработаны так, как будто запрос не был отменен.

Обновлено:

По предложению Дата я переключился на настройку useRef:

  const abortControllerRef = useRef<AbortController>(new AbortController());

Это сработало для первого поиска... но все последующие поиски немедленно отменяются без участия пользователя. При исследовании этого вопроса мне кажется, что мне нужно создать новый AbortController для каждого запроса. НО, поскольку я использую useRef, я не могу сделать это в обработчике кликов. Попробую сделать это в кастомном хуке.