Content Security Policy: The page’s settings blocked the loading of a resource

I have implemented Google Sign-In button in a ReactJS web client. After successful sign-in the page fails to get redirected from "https://accounts.google.com/..." back to my web-client URL which is http://localhost:5000.

This is from browser console logs:

Navigated to http://localhost:3000/login
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
POSThttp://localhost:3000/login
[HTTP/1.1 404 Not Found 17ms]

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico (“default-src”).

This is the code for GoogleAuth button which I copied from here

import { useEffect, useRef } from 'react'

const loadScript = (src) =>
    new Promise((resolve, reject) => {
        if (document.querySelector(`script[src="${src}"]`)) return resolve()
        const script = document.createElement('script')
        script.src = src
        script.onload = () => resolve()
        script.onerror = (err) => reject(err)
        document.body.appendChild(script)
    })

const GoogleAuth = () => {
    // Refer Google Identity API documentation from https://developers.google.com/identity/gsi/web/reference/js-reference#ux_mode

    const googleButton = useRef(null);

    useEffect(() => {
        const src = 'https://accounts.google.com/gsi/client'
        const id = "<I gave valid ClientID>"

        // Load Google sign-in page by redirecting the page.
        loadScript(src)
            .then(() => {
                /*global google*/
                console.log(google)
                google.accounts.id.initialize({
                    client_id: id,
                    ux_mode: "redirect",
                    login_uri: window.location,
                    callback: handleCredentialResponse,
                })
                google.accounts.id.renderButton(
                    googleButton.current,
                    { theme: 'outline', size: 'large' }
                )
            })
            .catch(console.error)

        return () => {
            const scriptTag = document.querySelector(`script[src="${src}"]`)
            if (scriptTag) document.body.removeChild(scriptTag)
        }
    }, [])

    function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
    }

    return (
        <div ref={googleButton}></div>
    )
}

export default GoogleAuth

I dont see the the console logs of callback "handleCredentialResponse".

What am I missing? How can I fix this issue without disabling browser safety features?

Posting this as a community for the benefits of others.

As mentioned by @Govind Avireddi:

I got it working by changing the Google sign-in page to popup instead using the option: ux_mode: popup.