Google OAuth2 Login redirect uri mismatch on Heroku but not localhost - stuck on a call to backend - reactjs

Question

I am using the MERN stack on a site where I use JWT for register/login. I've set up Google login using react-google-login on my site. On the localhost, everything works fine.
When I deployed to Heroku, I initially got zero response from pressing the button and an error of a redirect-URI-mismatch. So I went into my google developer account and added the Heroku page to the authorized javascript origins.
Currently, the Google login opens and everything appears successful....at first. The initial response (the first logged 'response' shown below) to Google shows up. So I'm getting a code returned.
function GoogleOAuth({ setSignedIn }) {
const responseGoogle = (response) => {
console.log('response', response);
const { code } = response;
if (code) {
axios
.post("/api/users/create-tokens", { code })
.then((res) => {
console.log(res.data);
toast.success("Success! You're connected to Google!")
})
.catch((err) => console.log(err.message));
}
};
In the associated google account, it shows that this app now has access. The problem arises at the second part - where it says if(code). Again, the call to the backend works fine locally but in Heroku it appears 'stuck' here and then the message in the console is redirect uri mismatch. I tried putting in the backend api address to the developer console's redirect uri section but that didn't work. Anyone have any idea what is going on at this point in Heroku? I really can't figure it out.
<GoogleContainer>
<Logo src={GoogleLogo} />
<GoogleLogin
clientId= {CLIENT_ID}
render={(renderProps) => (
<GoogleBtn
onClick={renderProps.onClick}
disabled={renderProps.disabled}
style={styleObj}
>
Connect to Google
</GoogleBtn>
)}
onSuccess={responseGoogle}
isSignedIn={true}
onFailure={responseError}
cookiePolicy={"single_host_origin"}
responseType='code'
accessType='offline'
scope='openid email profile https://www.googleapis.com/auth/calendar'
/>{" "}
</GoogleContainer>
);