Adding PROPS Data into the API body and Display the Response

I have a simple react application.

When a user clicks on Pay button. It posts data to my API and returns form details. The challenge I have is on adding data into the body of my POST request. The data I want to add there I am getting is from another page as PROPS.

I want to add it to the body, inside an object called bundle as an array.

for example:

bundle: {cart.attributes}.

When that is done I display the response on the page.

Below I have attached the code I am using.

import React, { useState } from "react";

function App({ cart }) {
  
  console.log(cart);
  const handleSubmit = () => {
    const token = "fb83b937-2739-3d6e-9519-09387b92dfae";
    const data = {
      transactionReference: "string",
      paymentMethod: "CreditCard",
      checkoutOrderUrl: "http://www.test.com/",
      user: {
        name: "string",
        msisdn: "+27610983142",
        email: "[email protected]",
      },
      payementMethodDetail: {
        RedirectUrl: "http://www.test.com",
        PurchaseEventWebhookUrl: "http://www.test.com",
      },
      bundle: [
        {
          productCode: "311",
          amount: 100,
          currencyCode: "ZAR",
          quantity: 1,
        },
      ],
    };
    const requestOptions = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify(data),
    };
    fetch(
      "https://api.flash-internal.flash-group.com/ecommerceManagement/1.0.0/api/checkout/",
      requestOptions
    )
      .then((response) => response.json())
      .then((res) => console.log(res));
  };

  return (
    <div className="App">
      <button type="submit" onClick={handleSubmit}>
        Post items
      </button>
    </div>
  );
}

export default App;

This is what the cart data looks like