I have these values ​​in the useState hook box constant

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"}
]

I also have these values ​​in hi[0].

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

What I want to do is change the productCode by using the setBox function only when the placeId of box and the placeId of hi[0].children match.

this is my code

   hi[0].children.map((v) => {

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

But when I run my code, the value is entered strangely like below.

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

expected answer

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

How can i fix my code?