how to wait for the request to be sent and then send a new request?

i have a problem. im creating a chat app with react and react redux and im using supabase library for sending request to my supabase database. now for sending users entered message, i have a problem. when user enters ten messages together at the same time, those ten messages wont be sent to the database correctly and maybe the last message will be sent correctly. now to fix this problem, i want to implement this: if user enter his/her message, if an other request is sending at the same time, wait for that request to be sent. when that request is sent, send the new request. so when user enter 10 messages for example, the messages will be sent to the database one by one. each request wait for the sending request and when that request is sent to database successfully or it got an error, then send the next pending request. i tried to implement this but i couldnt. because the function that is sending the users message to the database is an event handler and i dont know how to wait for the sending request thre. here is that functions codes:

      //a function to store users message in database 
  const sendMessageHandler = async (e) => {
    e.preventDefault();
    
    //here i want to check if an other request is sending, wait for that request to be sent and 
    then send the new request.
     
    //create an object with users message infos
    const userMessage = {
      from: username,
      text: messageRef.current.value,
      time: `${new Date().getHours()}:${new Date().getMinutes()}`,
    };

    //create an id with the value of current chats length
    const id = chats[currentIndex].chats.length;

    //store the users message in sending messages state
    dispatch(
      chatsActions.addSendingChat({
        ...userMessage,
        id,
        name: chats[currentIndex].name,
      })
    );

    //create the current messages object to update the group row
    let currentChats = {
      name: chats[currentIndex].name,
      users: chats[currentIndex].users,
      onlines: chats[currentIndex].onlines,
      chats: chats[currentIndex].chats,
      unreads: chats[currentIndex].unreads,
    };

    //add users message to current chats
    currentChats.chats = [...currentChats.chats, userMessage];

    //update the chats of the selected group with the new values
    const { error } = await supabase 
      .from("chats")
      .update(currentChats)
      .eq("id", apiChatId);

    //after updating the row, delete the users message that was in sending messages state from there 
    dispatch(chatsActions.removeSendingChat(id));
  };

thanks for your help.