Tengo estos valores en la constante del cuadro de enlace useState

 const [box, setBox] = useState( targetFarm.children.flatMap((item) => item.children.map((v) => ({ placeId: v.placeId, productCode: v.productCode })) ) ) box = [ { placeId: 257, productCode: "INSECT3"} { placeId: 258, productCode: "INSECT3"} { placeId: 259, productCode: "INSECT5"} { placeId: 260, productCode: "INSECT5"} ]

También tengo estos valores en hi[0].

 hi[0] = { children : [ {placeId: 257, productCode: "INSECT3"}, {placeId: 258, productCode: "INSECT3"}, ] }

Lo que quiero hacer es cambiar el código de producto usando la función setBox solo cuando el placeId de box y el placeId de hi[0].children coinciden.

este es mi codigo

 hi[0].children.map((v) => { box.map((item) => { if (v.placeId === item.placeId) { // data : "INSECT4" setBox({ productCode: data }) } }) })

Pero cuando ejecuto mi código, el valor se ingresa de manera extraña como se muestra a continuación.

 box = [ { placeId: 257, productCode: "INSECT3" } ... productCode: "INSECT4" << this is weird ]

respuesta esperada

 box = [ { placeId: 257, productCode: "INSECT4"} { placeId: 258, productCode: "INSECT4"} ]

¿Cómo puedo arreglar mi código?