React Authenticator Social Login - redirect_mismatch

I am buiding an application with Amplify and React. I wanted to add the social login (Facebook and Google). However, when I try to click on the Facebook or Google buttons I get redirected to a link that has a qeury param error=redirect_mismatch and says An error was encountered with the requested page.

When I try the Test Endpoint of the Hosted UI for Cognito it works fine, but I get an error when I try to do it with the Authenticator Component.

I am using the following versions of the packages: "@aws-amplify/ui-react": "^4.6.0", "aws-amplify": "^5.0.20",

I also checked the callback urls under the App Integrations on Cognito, and they match the urls from where the login flow starts.