Multiple file input type overriding selected files and upload only last file selected

I am trying to build a form that upload multiple images. below is my code

<form method="post" action="{{ route('addproduct') }}" enctype="multipart/form-data">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="image" name="image[]"  multiple>
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
  <div class="row mt-4">
    <div class="row" id="preview_img">
  </div>
  <button type="submit>Submit</button>
</form>

and on the server side I do

dd($request->image); 

The problem is, if I click the input field and select more than one file using shift/ctrl click and upload, it works fine uploading all the selected files but if say I click on the browse and select one file and then again click on browse and select one more file and repeat, it just keep the last file selected. If that is how it is suppose to work then is there a way to make it work the way I want where user can select multiple files using browse button multiple times because the files user want to upload might not be in the same folder so he/she might want to browse multiple times to select all files they want to upload.