Google's sign in button layout shift after loading

Question

I am following https://blog.logrocket.com/guide-adding-google-login-react-app/ to add Google sign-in to my ReactJS app.

I coded:

import React from 'react';
import { GoogleLogin } from '@react-oauth/google';

export function GoogleSignIn() {
    const responseMessage = (response) => {
        console.log(response);
    };
    const errorMessage = (error) => {
        console.log(error);
    };
    return (
        <div>
            <GoogleLogin onSuccess={responseMessage} onError={errorMessage} />
        </div>
    )
}

And in the App.js, I tried to use <div style={{ width: '100%' }}> but it doesn't work. This is what happens when I reload the page:

enter image description here enter image description here

Initially, the size of the button is correct but in a split second it changes its size.