Microsoft.JSInterop.JSException: There is no file with ID 6. The file list may have changed. Error: There is no file with ID 6

I have this error when I open a modal with two InputFile, then close the modal and then reopen the modal and upload a file in one of the InputFile.The two InputFile are in two razor components.

This is where the two components are inside the modal code :

<div class="product-portrait-container"><div class="product-portrait-image-container"><p>@Localize["Product_Background_Image"]</p><div class="product-image-div"><ProductImageUploaderComponent @ref="_backgroundImageUploader"                                            IsPortrait="_isPortrait"                                            NotifyParent="NotifyProductCreationModal"                                            AllowedFileExtensions="@Constants.ALLOWED_PRODUCT_IMAGE_FILE_EXTENSIONS"                                            IsEditMode="@_isEditMode"></ProductImageUploaderComponent></div></div><div class="product-portrait-image-container"><p>@Localize["Product_Image_Foreground"]</p><div class="product-image-div"><ProductImageUploaderComponent @ref="_imageForegroundUploader"                                           IsPortrait="_isPortrait"                                           NotifyParent="NotifyProductCreationModal"                                           AllowedFileExtensions="@allowedImageForegroundFileExtension"                                           IsEditMode="@_isEditMode"></ProductImageUploaderComponent></div></div></div>

ProductImageUploaderComponent

<InputFile id="@($"fileInput{ComponentId}")"            type="file"            name="file"            accept="@AllowedFileExtensions"            style="display: none"            @ref="InputFile"            OnChange="UploadImage" />

I tried all the solution proposed on others question, but at no luck so far.

Thanks in advance for any pieces of advice you can provide.