replacing and object inside an existing array of objects

I have an array of objects which is part of a form submission,

 const cartsObjForSave=[
        {
            "id": "full",
            "name": "Full Cart",
            "weight": 0,
            "volume": 0,
            "dimensions": {
                "length": 0,
                "breadth": 0,
                "height": 0
            },
            "quantity":  parseInt(state.fullCarts)
        },
        {
            "id": "half",
            "name": "Half Cart",
            "weight": 0,
            "volume": 0,
            "dimensions": {
                "length": 0,
                "breadth": 0,
                "height": 0
            },
            "quantity":  parseInt(state.halfCarts)
        },
        {
            "id": "smu",
            "name": "SMU",
            "weight": 0,
            "volume": 0,
            "dimensions": {
                "length": 0,
                "breadth": 0,
                "height": 0
            },
            "quantity": parseInt(state.smu)
        }
    ]

    const body=[
        {
            "id": state.name,
            "name": state.name,
            carts: cartsObj
        },
        ...carts
    ]

in the cartsObjForSave array the quantity key is taken from the state by setting it in a react useState variable the carts array in the body array is from the api

my useState initial is

const [state,setState]=useState({name:'',fullCarts:null,halfCarts:null,smu:null});

carts object from the api is,

const carts={
    "name": "G75-98",
    "id": "G75-98",
    "carts": [
        {
            "quantity": 3,
            "dimensions": {
                "height": 0,
                "breadth": 0,
                "length": 0
            },
            "volume": 0,
            "weight": 0,
            "name": "Full Cart",
            "id": "full"
        },
        {
            "quantity": 5,
            "dimensions": {
                "height": 0,
                "breadth": 0,
                "length": 0
            },
            "volume": 0,
            "weight": 0,
            "name": "Half Cart",
            "id": "half"
        },
        {
            "quantity": 1,
            "dimensions": {
                "height": 0,
                "breadth": 0,
                "length": 0
            },
            "volume": 0,
            "weight": 0,
            "name": "SMU",
            "id": "smu"
        }
    ]
}

my aim is to replace the carts object if the user has edited say name or quantity in the carts object and pass it as a body for saving

i tried using

 const res=   carts.map(c=>{if(c.name===state.name){
             c=body[0];
            }
          return c})

to begin with but doesn't seems to work as expected is there a better approach to implement this

Since you are OK with mutating the array, I would recommend:

const updatedBody = body.map((item) => {
  if (item.name === state.name) {
    return {
      ...item,
      carts: cartsObjForSave,
    };
  }
  return item;
});

You only update (mutate) the item entry when its name matches the state.name.