Replace file input image with URL image before form submission

I have a file input that accepts images:

<div class="pictures-input">
  <label for="input-pictures">
     <input id="input-pictures" type="file" accept="image/*" multiple>
     <span>Add pictures</span>
  </label>
</div>

I have several image URLs and I want to add them programmatically to this input as if they were selected by the user. How can I achieve this with JavaScript?

I want the URLs to appear as selected files in the input, just like when a user manually selects images.

I managed to select a real image through the input, and then I tried to replace its URL with one from my URL array. While the preview shows my new image correctly, when I submit the form, it still sends the original image that was selected, not the one I tried to replace it with.