Combining a Microsoft Graph Toolkit people-picker with Microsoft.Identity.Web log-in in ASP.Net Core 7 MVC C# project

Question

I am having trouble getting the Microsoft Toolkit People-picker to work in my MVC ASP.Net Core 7 project. I used visual studio v22 to create a project that set up the login to Azure AD. In Azure AD, I have given the app Microsoft Graph User.Read permissions.

In appsettings.json:

AzureAd": {  
    "Instance": "https://login.microsoftonline.com/", 
    "Domain": "<my domain>.onmicrosoft.com",  
    "TenantId": "<my tenant id>",  
    "ClientId": "<my client id>",  
    "CallbackPath": "/signin-oidc" 
},  
"MicrosoftGraph": {  
    "BaseUrl": "https://graph.microsoft.com/v1.0",  
    "Scopes": "user.read"  
}  
  

In _layout.cshtml:

<script src="https://unpkg.com/@Html.Raw("@")microsoft/mgt/dist/bundle/mgt-loader.js"></script>

In a view:

<mgt-people-picker
    selection-mode="single" 
    disable-images="true" 
    user-filters="<my filters>"> 
    <template data-type="selected-person">  
        <mgt-person view="oneLine" person-details="{{person}}" fetchImage=true></mgt-person> 
    </template\>  
</mgt-people-picker>

So in order to get the people picker to work I needed to add the following to my layout:

<mgt-msal-provider  
    client-id="<my client id - same in appsettings>" 
    login-type="redirect"  
    scopes="user.read"  
    redirect-uri="<my redirect url>"  
    authority="https://login.microsoftonline.com/<my tenant>.onmicrosoft.com"> 
</mgt-msal-provider>  

but now people are forced to log in twice to get the people picker to work. There must be something that I am missing to make the first login persist throughout the session - I just don't know how to code it.