AbortController cannot stop previous request

Question

I put the abortcontroller in my file and want to abort multiple request if clicked repeatedly. The thing is the abortcontroller signal is set true but when i see in the network activity the request keep going hence the cancel doesn't happen at all

I hope the abortcontroller stop my request and the I will get the latest request from latest button click

let controller = new AbortController(); // Initialize the controller

const fetchDb = (data) => {
  const id = data.room.roomId;
  controller.abort(); // Cancel the previous request, if any
  controller = new AbortController(); // Create a new controller for the current request
  const signal = controller.signal;

  axios.get(route('admin.app.whatsapp.whatsapp_fetchMessages', id), { signal })
    .then((res) => {
      try {
        if (res.data.data.length === 0) {
          messagesLoaded.value = true;
          messages.value = [];
        } else if (res.status === 200) {
          nextPageUrl.value = res.data.next_page_url;
          messages.value = res.data.data.reverse();
          res.data.next_page_url === null ? messagesLoaded.value = true : undefined;
        } else if (res.data.status === 'error') {
          // alert(res.data.message);
        } else {
          console.log('room change failed?');
        }
      } catch (e) {
        console.error("error: " + e);
      }
    })
    .catch((error) => {
      if (error.name === 'AbortError') {
        console.log('Request aborted');
      } else {
        console.error('Error:', error);
      }
    });

};