Handling data for sending mass emails

Question

I created a table to display data regarding customer orders that will likely need canceling.

If an order needs canceling, a checkbox will be checked, and the data in question will be handled via a handleCheck function that returns the rows of data in question, and a handleClick function sends the emails in question.

Currently, my handleClick function sends out the appropriate number of emails, but they're all duplicates. I am having trouble determining how to send an email for each unique row selected. Any advice would be greatly appreciated. Thanks!

Here is my handleCheck function, which gets called when a checkbox gets clicked:

const handleCheck = () => {
  //R is set as row checked...
  if (checked == true) {
    setR(row);
    setIdx(index);

    console.log("row: ", r, idx);
  }
  //Mail is set to an array containing 'r'...
  setMail([r]);
  mail.push(r);
  console.log("mail: ", mail);
};

This is how I define the state on r, mail, and idx:

const [r, setR]: any = useState();
const [mail, setMail]: any = useState([]);
const [idx, setIdx]: any = useState();

Here is my handleClick function, which gets called when a "send email" button gets clicked:

function EmailSnackbars() {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(true);
    //idx is equal to index where checked == true.
    //r is equal to row where checked == true.
    //Currently sending correct number of emails, but these are duplicates...
    for (let i = 0; i <= idx; i++) {
      mail.filter((r: any) => [
        r.ship_firstname,
        r.ship_lastname,
        r.product_id,
        r.gtin,
        r.description,
      ]);

      sendMail(firstname, lastname, email, product_id, eta, gtin, description);
    }
  };

  const handleClose = (
    event?: React.SyntheticEvent | Event,
    reason?: string
  ) => {
    if (reason === "clickaway") {
      return;
    }

    setOpen(false);
  };

  return (
    <>
      <Tooltip title="Send Email(s)">
        <Button
          variant="text"
          size="large"
          color="secondary"
          onClick={handleClick}
        >
          <SendIcon />
        </Button>
      </Tooltip>
      <Snackbar
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
        TransitionComponent={TransitionDown}
      >
        <Alert
          onClose={handleClose}
          severity="info"
          sx={{ width: "100%" }}
          elevation={11}
          variant="filled"
          color="info"
        >
          Email(s) Sent!
        </Alert>
      </Snackbar>
    </>
  );
}

Also, this is where my sendMail function is defined:

let [firstname, setFirstname]: any = useState();
let [lastname, setLastname]: any = useState();
let [email, setEmail]: any = useState();
let [eta, setEta]: any = useState();
let [gtin, setGtin]: any = useState();
let [description, setDescription]: any = useState();
let [product_id, setId]: any = useState();

//Function to send emails to customers on click of 'send email' button.
const sendMail = (
  firstname: any,
  lastname: any,
  email: any,
  eta: any,
  gtin: any,
  description: any,
  product_id: any
) => {
  const response: any = axios.post(`/api/email`, {
    params: {
      firstname: r.ship_firstname,
      lastname: r.ship_lastname,
      email: test_email,
      product_id: r.product_id,
      eta: r.eta,
      gtin: r.gtin,
      description: r.description,
    },
  });
};