FluentInputFile, Microsoft.JSInterop.JSException: Cannot read properties of undefined

I have tried the example and it works.

The example code below

The blazor code

@page "/file-upload-4"@inject IJSRuntime JS<h1>File Upload Example</h1><InputFile @ref="inputFile" OnChange="ShowPreview" /><img style="max-width:200px;max-height:200px" @ref="previewImageElem" />@code {    private InputFile? inputFile;    private ElementReference previewImageElem;    private async Task ShowPreview() => await JS.InvokeVoidAsync("previewImage", inputFile!.Element, previewImageElem);}

The javascript

 window.previewImage = (inputElem, imgElem) => {  const url = URL.createObjectURL(inputElem.files[0]);  imgElem.addEventListener('load', () => URL.revokeObjectURL(url), { once: true });  imgElem.src = url;}

The example uses blazor "InputFile" component and can get the file using "inputElem.files[0]" in javascript.

My question is if using "FluentInputFile" then inputElem.files[0] failed with below message

Error: Microsoft.JSInterop.JSException: Cannot read properties of undefined (reading '0')TypeError: Cannot read properties of undefined (reading '0')    at window.previewImage (CreateProduct.js:3:52)

Seems can not use inputElem.files[0] in javascript if using "FluentInputFile"