Expected behavior ALert should be displayed after api call is complete Actual behavior it is showing as soon as i clicked on button Resources (screenshots, code snippets etc.)

i have this code const triggerOffsetAlertforAddItems = useRef(null); const [alertMessage, setAlertMessage] = useState("");

Save

{alertMessage}

my function to set the alertMessage is

const handleSave = async () => { //const method = category ? 'PUT': 'POST'; const method = 'PUT' for (const item of itemsData) { const formData = new FormData(); const { image, name, subdomain, category } = item; if (image) { const renamedFile = new File([image], image.name, { type: image.type }); formData.append('files', renamedFile); } const newItem = { image: image ? image.name : '', name, subdomain, category }; const inventoryData = JSON.stringify([newItem]); const blob = new Blob([inventoryData], { type: 'application/json' }); formData.append('inventory', blob); const endpoint = ${baseUrl}/inventory;

    try {
      const response = await axios({
        method: method,
        url: endpoint,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        withCredentials: true,
        data: formData,
      });
      if (response.status === 200) {

        setAlertMessage('Item added successfully');
        setAlertVisible(true); 

      } else {
        throw new Error('Error updating inventory');
      }
    } catch (error) {
      console.log(error);
      setAlertMessage('Error updating inventory');
      throw new Error('Error updating inventory');
    }
  };
enter code here

can any body help?