I got a dashboard of products, whenever I try to create/edit a product I had the issue where nexjs preserves the state between navigation, and as they recommended to clear the state on a useLayoutEffect
so when Iv added the following code to my client form
useLayoutEffect(() => { return () => { setImageChanges(() => []) } }, [])
it worked fine, BUT the issue that comes now is whenever I click on a product to update it the first Time I enter the form I only see the product's data such as price,name... I don't see the Images at all UNTIL I hit a refresh

I have attached a video record to my issue and a codeSnap of my code

just to clarify what's on the record is the first part i use useLayoutEffect i enter the form the images don't appear
the second part is without useLayoutEffect