I have a React component where I’m fetching data and attempting to send an email using the fetched data when a button is clicked. However, I’m encountering a problem where the button needs to be clicked twice for the email to send properly after the data has loaded.

const OrderCategoryList = () => {
  const { emailData,fetchOrderData } = useEmailData();
  const [orderData, setOrderData] = useState(null);
  const [userInfo, setUserInfo] = useRecoilState(userInfoAtom);
  const [orderID, setOrderID] = useRecoilState(takeOrderID);
  const setOrderIDType = useSetRecoilState(setOrderType);
  const setOrdername = useSetRecoilState(setOrderUsername);

  const handleOrder = async (id, status, username, orderType, email) => {
   setOrderID(id);
    setOrderIDType(orderType);
    setOrdername(username);

    await fetchOrderData();
    if (!emailData) {
      console.log("Email data could not be loaded.");
      return;
    }

    if (BOOSTER_STATUS === "order") {
      alert("You cannot take an another order.");
    } else {

        const templateParams = {
          // Assuming templateParams setup is correct
        };

        console.log('Template Params:', templateParams);
        await sendEmail(templateParams);
      } catch (error) {
        console.error('Failed to handle order:', error);
      }
    }
  };

  const sendEmail = async (templateParams) => {
    // Assuming email sending logic using emailjs is correctly set up
  };

  if (!orderData) {
    return (
      <Wrapper>
        <Container>No data available. Please relogin and try again.</Container>
      </Wrapper>
    );
  }

  return (
    <Wrapper>
      {orderData.map((item, index) => (
        <Container key={index}>
          {/* Render order items here */}
          <button onClick={() => handleOrder(item.id, item.status, item.user.username, item.orderType, item.user.email)}>
            Take Order
          </button>
        </Container>
      ))}
    </Wrapper>
  );
};

my customer useEmailData component

const useEmailData = () => {
  const takeOrderIDState = useRecoilValue(takeOrderID);
  const takeOrderType = useRecoilValue(setOrderType);

  const fetchOrderDataFn = async () => {
    if (takeOrderIDState === null) {
      return null;
    }

    switch (takeOrderType) {
      case "SOLO":
        return await auth
          .getSoloOrderId(takeOrderIDState)
          .then((res) => res.data);
      case "DUO":
        return await auth
          .getDuoOrderId(takeOrderIDState)
          .then((res) => res.data);
      case "NETWIN":
        return await auth
          .getNetWinsOrderId(takeOrderIDState)
          .then((res) => res.data);
      case "COACH":
        return await auth
          .getCoachOrderId(takeOrderIDState)
          .then((res) => res.data);
      default:
        return null;
    }
  };

  const {
    data: emailData,
    error: emailError,
    isLoading: dataLoading,
    refetch: refetchOrderData,
  } = useQuery({
    queryKey: ["emailData", takeOrderIDState],
    queryFn: fetchOrderDataFn,
    enabled: takeOrderIDState !== null,
  });

  return {
    emailData,
    emailError,
    dataLoading,
    fetchOrderData: refetchOrderData,
  };
};

export default useEmailData;

I think it’s most likely an async and sync problem. I’ve tried everything to fix this, but I still need to click twice for the email to send with the data.