Handling data for sending mass emails - email

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,
},
});
};