How to optimize api calls

Question

I'm overload with work to do and have a issue in my application that I don't know how to solve. Basically I have just built an web site with a dashboard containing a chat integrated with the whatsApp oficial api, I'm using realtime database from firebase to store and manipulate my http requests. The functions are working. I can send and receive messages/data from my inter chat that goes to whatsApp it self. But when I send a message through my chat, it take some extra time to appear in my webBrowser, because it depends on the response of a first call to an whatsApp endpoint.

I need to improve the time of return from the messages that i send from my internal chat.

Here's the current code that I'm using to SEND messages from my CHAT TO WHATSAPP:

  const handleSubmit = async (event) => {
    event.preventDefault();

    if (type == "application") {
      setType("document");
    }
    if (type == "text") {
      format.current = {
        preview_url: false,
        body: envio,
      };
    }
    // -----------------------------ELSE (MIDIAS E DOCUMENTOS)-----------------------------------------------------
    else {
      const formData = new FormData();

      // Adicione os campos ao FormData
      formData.append("messaging_product", "whatsapp");
      formData.append("file", document);
      formData.append("type", type);
      console.log(document);
      try {
        axios
          .post(
            "https://graph.facebook.com/v18.0/my phone id/media",
            formData,
            {
              headers: {
                Authorization:
                  "Bearer My code for authentication",
                "Content-Type": "application/json",
              },
            }
          )
          .then((response) => {
            console.log(response);
            const id_message = response.body.id;
            console.log("id_message:", id_message);
            if (type == "document") {
              const file = {
                id: id_message,
                filename: envio,
              };
              format.current = file;
            } else {
              const midia = {
                id: id_message,
              };
              format.current = midia;
            }
          });
        console.log("acho que deu certo");
        console.log(format.current);
      } catch (error) {
        console.log(error);
      }
    }
    //---------------------------CABOU MIDIAS-------------------------------------------------------------------
    const formatedEnvio = {
      messaging_product: "whatsapp",
      recipient_type: "individual",
      to: id,
      type: type,
      [type]: format.current,
    };
    const send = async () => {
      try {
        axios
          .post(
            "https://graph.facebook.com/v18.0/my phone id/messages",
            formatedEnvio,
            {
              headers: {
                Authorization:
                  "Bearer My code for authentication",
                "Content-Type": "application/json",
              },
            }
          )
          .then((response) => {
            //Pegar a resposta e tratar, depois:
            const timestamp = getTimestamp();

            const interiorBody = {
              message_id: response.data.messages[0].id,
              text: envio,
              from: "funcionario",
            };

            const contatoInfo = {
              wa_id: id,
              last_message: "Primeira msg iniciada por Funcionario",
            };

            const postFullData = {
              [timestamp]: interiorBody,
            };
            try {
              writeText(
                postFullData,
                interiorBody,
                contato_name,
                timestamp,
                contatoInfo,
                id
              );
            } catch (error) {}
          })
          .catch((error) => {
            console.log(error);
          })
          .then((response) => {
            console.log("Tudo certo");
          })
          .catch((error) => {
            console.log(error);
          });
      } catch (error) {
        console.log(error);
      }
      console.log("Enviei?");

      /*
        
      */
    };
    setEnvio("");
    send();
  };

Basically when I submit my Form component I catch what it that I'm trying to send, treat it and send to whatsApp endpoint. As a return for this call I get the message_id. Then with the return I add it to my data and then send it to my database.

It would be a good ideia to sendo first to my db, and then to my api, then after I just uptade the last message in my database that hasn't been updated?