If you have a custom domain/url for your Okta instance you might need to change your authorization server endpoint URL. It looks like in the first screenshot you provided that the "Auth URL" and "Access Token URL" both are using ".../default..." authorization server. Replace the "default" with the ID of your custom authorization server found by going to "Security -> API -> Authorization Servers". If you can see the "Issuer URI" for each authorization server at the end shows their IDs. You can also click the name of the custom authorization server you want to use and when you look at the Settings page you can click the "Metadata URI" and see all the different endpoint URLs noting that they show the unique ID as well.

Since you are getting a 400 error from Okta it should have logged something to the logs. I suggest you do another test while watching the logs and view the details of anything that happens during your test even if it does not look like an error and see if it gives you any hints. Also take a look at the complete URL in your browser's address bar when you see the 400 error (second screenshot) as it might contain some error information.

The following is another post where someone had a similar 400 error and they were told to double check the client id so that is something you should review as well.. https://devforum.okta.com/t/400-bad-request-for-authorize-endpoint/24543

Lastly, make sure your app is set up with "Sign-in redirect URIs" in Okta set to your "Callback URL" that your screenshot show "...oauth-pstmn.io...".