Chrome does not accept self signed certificate but accepts dotnet developers certificate

Question

I am trying to add self signed certificate to ASP.NET Core MVC website but chrome browser is not accepting it. Showing message Certificate is not valid.

The self signed certificate is created with powershell as given on the below 2 links:

1. https://learn.microsoft.com/en-us/powershell/module/pki/new-selfsignedcertificate?view=windowsserver2022-ps

2. https://learn.microsoft.com/en-us/powershell/module/pki/export-pfxcertificate?view=windowsserver2022-ps

The appsettings.json file is:

{
"Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "Kestrel": {
    "Endpoints": {
      "MyHttpEndpoint": {
        "Url": "http://localhost:5000"
      },
      "MyHttpsEndpoint": {
        "Url": "https://localhost:5001",
        "SslProtocols": [ "Tls12", "Tls13" ],
        "Certificate": {
          "Path": "mypfx.pfx",
          "Password": "1234"
        }
      }
    }
  }
}

The error on the browser:

But when I use dot net developers certificate then chrome accepts is. Here in this case the appsettings.json is:

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "Kestrel": {
    "Endpoints": {
      "MyHttpEndpoint": {
        "Url": "http://localhost:5000"
      },
      "MyHttpsEndpoint": {
        "Url": "https://localhost:5001",
      }
    }
  }
}

See image in this case:

Why this things comes?