Radio button group not working as expected in Blazor

Question

I have below radio button group in Blazor App.

By Default,IsExternal is false. When I change to True, backend value changing to true but the UI still selecting false. When I try second time, the UI changing to true.

But when I change to false again, it is working fine. When change to true, I need to do it twice again. What is wrong with below code?

 <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
      <input type="radio" class="btn-check" name="btnExternal" id="btnExternalTrue" autocomplete="off"
                           checked="@signatoryRequest.IsExternal"
                           @onchange="() => ChangeIsExternal(true)"/>
      <label class="btn btn-outline-primary" for="btnExternalTrue">True</label>

      <input type="radio" class="btn-check" name="btnExternal" id="btnExternalFalse" autocomplete="off"
                           checked="!@signatoryRequest.IsExternal"
                           @onchange="() => ChangeIsExternal(false)"/>
       <label class="btn btn-outline-primary" for="btnExternalFalse">False</label></div>

 private void ChangeIsExternal(bool value)
{
    signatoryRequest.IsExternal = value;
    //StateHasChanged();
}

Answer 1

I don't think this works out well:

checked="!@signatoryRequest.IsExternal"

so try this:

checked="@(!signatoryRequest.IsExternal)"

It should always work and is clearer to read.