Using "From Name" in SendGrid API

I am attempting to specify a “from name” for emails sent through the SendGrid API (so that the email from address appears as e.g. “John Doe” instead of the sender email, e.g. “me@me.com”. )

I am including my email.jsw and sendGrid.js pages below. Does anyone know the correction to make this work? The critical code is marked in green below.

email.jsw

export function sendEmailWithRecipient(subject, body, recipient, name) {
const key = “my sendgrid key”;
const sender = “me@me.com”;
return sendWithService(key, sender, recipient, subject, body, name);
}

sendGrid.js
import {fetch} from ‘wix-fetch’;
export function sendWithService(key, sender, recipient, subject, body, name) {
const url = “https://api.sendgrid.com/api/mail.send.json”;
const headers = {
“Authorization”: "Bearer " + key,
“Content-Type”: “application/x-www-form-urlencoded”
};
const data = from =email: ${sender}, name: ${name} &to=${recipient}&subject=${subject}&html=${body};
const request = {
“method”: “post”,
“headers”: headers,
“body”: data
};
return fetch(url, request)
.then(response => response.json());
}

Use the new(er) Version 3 API

export function sendWithService(key, sender, recipient, subject, body, name) {
    const url = "https://api.sendgrid.com/v3/mail/send";
    const headers = {
       "Authorization": "Bearer " + key,
       "Content-Type": "application/json"
    };
    
    const data = {
      "personalizations": [{
      "to": [{
           "email": recipient
          }]
    }],
    "from": {
      "email": sender,
      "name": name //here you are
    },
      "subject": subject,
      "content": [{
      "type": "text/html",
      "value": body
      }]
    };

    fetch(url, {
      "method": "POST",
      "headers": headers,
      "body": JSON.stringify(data)
      });
}

Works perfectly! Many thanks Shan!