As the documentation says: "Each time you call createObjectURL(), a new object URL is created, even if you've already created one for the same object." https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
URL.createObjectURL(props.file) at src attribute will constantly add new object URL. So I added useEffect which depends on props.files and creates 1 object URL. But this is not the best solution and needs some work. For example, when deleting, clicking on closeIcon will change props.file and useEffect will create another object URL for each remaining file. You will need to add URL.revokeObjectURL().
closeIcon position.
closeIcon position was above attachments and there was no way to remove a single image. It now looks like this:
Memory Leak.
As the documentation says: "Each time you call createObjectURL(), a new object URL is created, even if you've already created one for the same object." https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL URL.createObjectURL(props.file) at src attribute will constantly add new object URL. So I added useEffect which depends on props.files and creates 1 object URL. But this is not the best solution and needs some work. For example, when deleting, clicking on closeIcon will change props.file and useEffect will create another object URL for each remaining file. You will need to add URL.revokeObjectURL().
closeIcon position.
closeIcon position was above attachments and there was no way to remove a single image. It now looks like this: