Blazor inside ?

I tried everything, Googled a lot, still can't get it to work. I'm trying to use <EditForm> with <InputSelect> to update an existing object(video in my case).

1. I want an InputSelect with @bind-Value="video.DisplayId". Then the first selected option will be; either 1. if video.DisplayId is null, then display "None". 2. if video.DisplayId is not null, display the object's name (video.Display.Name).

2. Then load the whole list of displays into options with foreach, except the currently selected.

3. If video.DisplayId is not null then add an option at the end for "None".

When loading the Blazor page, everything looks fine with its values, and when I select i.e. from video.Display.Name to "None", and hit Save, it works.

But as soon as I go from "None" to a display.Name, it says Object reference not set to an instance of an object (see my code below, where it's saying it).

My code:

<InputSelect class="form-select" @bind-Value="video.DisplayId">    @if (video.DisplayId is null)    {<option selected value="">None</option>    }    else     {        // Object reference not set to an instance of an object ....<option selected value="@video.DisplayId">@video.Display.Name</option>    }    @foreach (Display display in displays.Where(display => display.Id != video.DisplayId))    {<option value="@display.Id">@display.Name</option>    }    @if (video.DisplayId is not null)    {<option value="">None</option>    }</InputSelect>

I think it has something to do with Blazor and how it's rendering the page after I select, but how do I fix this issue?