Recomiendo más este codigo y que usen bootstrap para simplificar el avance del curso y ver más react.

Utilice .sass para evitar escribir llaves y punto y coma!

$white: #fff
$google-blue: #4285f4
$button-active-blue: #1669f2

.google-btn 
    cursor: pointer
    margin-top: 5px
    background-color: #4285f4
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25)
    transition: box-shadow .3s ease
    height: 42px
    display: flex
    align-items: center
    justify-content: space-between

    .google-icon-wrapper
        background-color: $white
        height: 42px
        width: 42px
        display: flex
        align-items: center
        justify-content: center

    .google-icon 
        width: 22px
    
    .btn-text 
        padding: 0 14px
        color: $white
        font-size: 14px
        letter-spacing: 0.2px
    
    &:hover 
        box-shadow: 0 0 6px $google-blue
    
    &:active 
        background: $button-active-blue

Mi HTML LO TENGO ASI

<div className="col-sm-12 col-md-6 m-auto">
   <h1>LoginScreen</h1>
   <hr />
   <form action="">
     <div className="form-group">
       <input
         type="text"
         placeholder="email"
         name="email"
         className="form-control"
       />
     </div>
     <div className="form-group">
       <input
         type="password"
         placeholder="password"
         name="password"
         className="form-control"
       />
     </div>

     <div className="text-center">
       <button type="submit" className="btn btn-primary btn-xs w-75">
         Login
       </button>
       <div className="mt-3">
       <div className="google-btn w-75 m-auto">
         <div className="google-icon-wrapper">
           <img
             className="google-icon"
             src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
             alt="google button"
           />
         </div>
         <p className="btn-text m-0">
           <b>Sign in with google</b>
         </p>
       </div>
       </div>
       <div className="text-right m-auto w-75">
       <Link to="auth/register">
         Create new Account
       </Link>
       </div>
     </div>
   </form>
 </div>

Mi propuesta usando SCSS

`.google-btn {
align-items: center;
background-color: $google-blue;
border-radius: 2px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
display: flex;
margin-top: 5px;
height: 40px;
transition: box-shadow 0.3s ease;
width: 100%;

.google-icon-wrapper {
align-items: center;
border-radius: 2px 0 0 2px;
background-color: $white;
display: flex;
justify-content: center;
height: 40px;
width: 40px;
.google-icon {
width: 18px;
height: 18px;
}
}
.btn-text {
color: $white;
font-size: 14px;
letter-spacing: 0.2px;
margin-left: 10px;
}
&:hover {
box-shadow: 0 0 6px $google-blue;
}
&:active {
background: $button-active-blue;
}
}
`

https://www.npmjs.com/package/react-google-button

ese botón lo usé en otro proyecto y creo que puede servir mas (mucho menos código)

https://www.npmjs.com/package/react-google-button

ese botón lo usé en otro proyecto y creo que puede servir mas (mucho menos código)

Gracias me sirvio @Crispovilla