Unable to bind the selected image file in Blazor file upload

I am learning blazor and c# fundas with a simple app.This app will allow you to
browse all kind of files including images.As all kind files we can browse, i need a seperate class
for images only so when ever user select file, first class-BrowserFileWithStatus list will trigger the second class-MediaVariantUI (lists)

class 1-BrowserFileWithStatus - list of this class NOT  use to bind to the UI

class 2-MediaVariantUI- list of this class will use to bind to the UI

I am able to bind the file name but How i can bind the images in mud card.I dont want to disturb my first class 
i need to asign my images to second class list.How can I do that? below is my classes and pages.

basicaly i dont want to disturb First class 

 //FIRST CLASS
public class BrowserFileWithStatus: FileWithStatusBase
    {
        public BrowserFileWithStatus(IBrowserFile file)
        {
            File = file ?? throw new ArgumentNullException(nameof(file));
            FileName = Path.GetFileName(File.Name);
        }
        public IBrowserFile File { get; }
    }


 public class FileWithStatusBase: IFileWithStatus
    {
        private readonly string fileName = null!;
        public string FileNameWithoutExtension { get; private init; } = null!;
        public string FileExtension { get; private init; } = null!;

        public string FileName
        {
            get => fileName;
            protected init
            {
                fileName = value;
                FileExtension = Path.GetExtension(fileName.AsSpan())[1..].ToString();
                FileNameWithoutExtension = Path.GetFileNameWithoutExtension(fileName);
            }
        }

    }

 public interface IFileWithStatus
    {

        string FileNameWithoutExtension { get; }

        string FileExtension { get; }

        string FileName { get; }
    }



//SECOND CLASS-USING FOR IMAGE ONLY OPERATIONS

 public class MediaVariantUI
    {
        private BrowserFileWithStatus file;

        public MediaVariantUI(BrowserFileWithStatus file)
        {
            File = file;
            this.file = file;
            Name = file.FileName;
            ContentType = file.File.ContentType;
            FileNameWithoutExtension = file.FileNameWithoutExtension;
            
        }
       
        public BrowserFileWithStatus File { get; }
        public String Name { get; set; }
        public String FileNameWithoutExtension { get; set; }
        public String ContentType { get; set; }
    }

 

My main UI Page

@page "/MediaUpload"
@using FileUpload.Models;



    
    @if (mediaformmodels.ListMediaVariantUI != null && mediaformmodels.ListMediaVariantUI.Count > 0)
            {
        

            }

    
       
        
            
                SUBMIT
            
        
    




@code {


    private MediaFormModels mediaformmodels = new();

    private async Task CreateMediaNewFormAsync()
    {

        foreach (var mediaFile in mediaformmodels.ListMediaVariantUI.Where(x => x != null))
        {
            //save each media files
        }


    }
}



//MediaFormModels class for mediaformmodels

using System.ComponentModel.DataAnnotations;

namespace FileUpload.Models
{
    public class MediaFormModels
    {
        private List? listMediaVariantUIValue = new();

        private List? listFileToUpload = new();

        public IReadOnlyList? ListFileToUpload
        {
            get
            {
                return listFileToUpload;
            }

            set
            {
                listFileToUpload = value.ToList();
                ListMediaVariantUI = value.Select(file => new MediaVariantUI(file)).ToList();
            }
        }

        public IReadOnlyList? ListMediaVariantUI
        {
            get { return listMediaVariantUIValue; }
            set { listMediaVariantUIValue = value.ToList(); }
        }
    }
}

My File upload page

 

@using FileUpload.Models;
FileuploadComponent

 

For image binding i have a card component

@using FileUpload.Models;
Display selected Images


    
        
            @foreach (var item in MediaVariantUIList)
            {
                
                    
                        
                        
                            
                            @* *@
                            @item.Name
                        
                        
                            
                        
                    
                
            }

        
    


@code {

    public int spacing { get; set; } = 2;

    [Parameter]
    public IReadOnlyList MediaVariantUIList { get; set; } = Array.Empty();

   
}