react setValues hook is not working properly

Question

I have an array of files that will be uploading, but I want to change the array of file strings to an array of objects which is working fine. But when I try to update the variable to the new array, it still keeps the old array in its place. My variable is declared as such:

const initialState = {
name: '',
description: '',
price: '',
categoryList: [],
category: '',
subcategoriesList: [],
subcategories: [],
countInStock: '',
images: [],
brand: '',
buttonText: 'Add Product',
}
const [values, setValues] = useState(initialState)

Now when a user uploads one or multiple images, images has the file path to where the file has been uploaded. Works as expected. Now I'm trying to allow for a 'default' image by running the following code before the product is uploaded to the database:

let newArray = values.images.map((file) => ({
default: 0,
file: file,
}))
setValues({ ...values, images: newArray })

I would think that setting the values with the newArray would replace what was in images at first, but when I console.log the values.images on the next line, I only get the previous images (just the filepath) before I changed it to an object. What am I missing or not doing correctly?

console.log(values.images) logs the previous images prior to being changed.

Answer 1

that is the correct way to change any state

let newArray = values.images.map((file) => ({
  default: 0,
  file: file,
}));

setValues((prevValues) => ({
  ...prevValues,
  images: newArray,
}));

// Now if you log values.images, it should contain the updated array.
console.log(values.images);