Using microsoft graph api to send email from a react application - 401 error - axios

Question

I have a react application that grants access to a user's outlook account. The azure app has delegated permissions for Mail.Send, Mail.ReadWrite and User.Read and when I go through the authorization flow I'm prompted that the application will be able to read and send emails for me. However, after retrieving an access token I get a 401 unauthorized error when sending an email. The logs say the token claims have Mail.Send, Mail.ReadWrite and I'm able to retrieve the user's emails just fine. So I think the token is valid. But sending an email doesn't work and gets a 401 error. Any ideas would be appreciated. Here is my request:
const url = "https://graph.microsoft.com/v1.0/me/sendMail";
const messageToSend = {
subject: "Testing Outlook API",
importance: "Low",
body: {
contentType: "HTML",
content:
"Hello, Testing 1234. This is the body of the message to send. <b>awesome</b>! ",
},
toRecipients: [
{
emailAddress: {
address: "someemail#email.com",
},
},
],
ccRecipients: [
{
emailAddress: {
address: "anotheremail#email.com",
},
},
],
saveToSentItems: true,
};
const headers = {
"Content-Type": "application/json",
Authorization: `Bearer ${microsoftToken}`,
};
axios
.post(url, messageToSend, {
headers: headers,
})
.then((response) => {
console.log("sent mail", response.data);
return response.data;
})
.catch((error) => {
console.log("📛", error);
return false;
});