useState not causing rerender when objects array changes *hooks* - reactjs

Question

I have an object, which has a number of keys, and at each key, there is an array of objects. Each object contains an image file that I need to show to preview the image that the user has just uploaded. But it's showing the image that was uploaded the previous time (not the one that's been just uploaded)
Apparently useState doesn't immediately cause a rerender unless it sees a change in the array or object How do I update states onchange in an array of object in React Hooks
I followed the above (and a number of similar suggestions from StackOverflow) and made a copy of the object and a copy of the array at the key but it still doesn't work
Any idea why?
const Form = props => {
let [images, setImages] = useState({
bannerPicture: [],
projectPictures: [],
projectsPictures: [],
thumbnailPictures: []
})
const showTempImage = (file, tempFileObj, key) => {
const imagesCopy = {...images}
// add this image to the end of the array at the given key
imagesCopy[key] = [...imagesCopy[key], tempFileObj]
setImages({...imagesCopy})
....
}
I just want the image to show immediately after the user uploads it

Answer 1

Do it from your async function.
I'm assuming you'll only show the image after the upload is complete.
const mockUploadApi = () => {
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve("uploadedImage");
},1000);
});
};
const App = () => {
const [state,setState] = React.useState({
status: "IDLE",
image: ""
});
const uploadImage = () => {
setState((prevState) => ({
...prevState,
status: "UPLOADING"
}));
// THIS SHOULD USE await BUT THE SNIPPET DOES NOT ALLOW IT
// SO I'M USING .then()
mockUploadApi().then((uploadedImage) => {
setState({
status: "IDLE",
image: uploadedImage
});
});
};
return(
<div>
<div>
status: {state.status}
</div>
<div>
image: {state.image || "no image"}
</div>
<div>
<button onClick={uploadImage}>
Upload
</button>
</div>
</div>
);
};
ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>