OAuth2 CORS error while receiving callback

Question

I'm trying to implement OAuth2 social login (Google, Facebook etc) manually, without using a special framework. For this purpose, I use Java Spring and React as UI. Previously, when I was using Thymeleaf there was no such problem, but after using React I got such an issue. I have the next configuration for the CORS:

@Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("https://www.facebook.com", "http://localhost:3000", "https://accounts.google.com")
            .allowedMethods("*")
            .allowedHeaders("*")
            .allowCredentials(true);
    }

On my react application I got the next code to do the request:

const handleSocialLoginRedirect = async (siteName) => {
        try {
            const response = await fetch('http://localhost:8081/oauth2/authorization/' + siteName);
            const data = await response.json();
            console.log(data);
        } catch (error) {
            console.error('Error:', error);
        }
    }

I got no problem with the CORS when making a request from UI to the backend, but after Google or Facebook sends a callback, I receive a CORS error:

Access to fetch at 'https://www.facebook.com/v16.0/dialog/oauth?client_id=....' (redirected from 'http://localhost:8081/oauth2/authorization/facebook') from origin 'http://localhost:3000' has been blocked by CORS policy

What am I missing?