Google Auth user-profile picture undefined once logged in

Question

I have been following a ReactJs tutorial that has implemented a deprecated react-google-login package, so I implemented the react-oauth/google package. I was able to implement the Login component that login the user using google account and successfully redirect them to the Home Page, and populates the Sanity database with the user information. My problem however is that once the user is redirected to the home page, their profile picture should be fetch from sanity cdn and displayed on the page, however I kept on getting undefined.

I have used the jwt-decode package to decode the google credentials which worked in the login page but still couldn't retrieve the profile-pic of the user. Been searching over the internet and most of the answers I got only covered the part I have already solve, please point me to the right direction.

Login.jsx component

import React from "react";
import { GoogleLogin } from "@react-oauth/google";
import { FcGoogle } from "react-icons/fc";
import jwt_decode from "jwt-decode";
import shareVideo from "../assets/share.mp4";
import logo from "../assets/logowhite.png";
import { client } from "../client";
import { useNavigate } from "react-router-dom";

const Login = () => {
const navigate = useNavigate();
const responseGoogle = (response) => {
const decodedHeader = jwt_decode(response.credential);

const { name, sub, picture } = decodedHeader;
const doc = {
  _id: sub,
  _type: "user",
  userName: name,
  image: picture,
};
client.createIfNotExists(doc).then(() => {
  navigate("/", { replace: true });
});
};
return (
 <div>
  <div className="flex justify-start items-center flex-col h-screen">
    <div className="relative w-full h-full">
      <video
        src={shareVideo}
        type="video/mp4"
        loop
        controls={false}
        muted
        autoPlay={true}
        className="w-full h-full object-cover"
      />
      <div className="absolute flex flex-col justify-center items-center top-0 left-0 right-0 bottom-0 bg-blackOverlay">
        <div className="p-5">
          <img src={logo} width={130} alt="logo" />
        </div>
        <div className="shadow-2xl">
          <GoogleLogin
            render={(renderProps) => (
              <button
                type="button"
                className="bg-mainColor flex justify-center items-center p-3 rounded-lg cursor-pointer outline-none"
                onClick={renderProps.onClick}
                disabled={renderProps.disabled}
              >
                <FcGoogle className="mr-4" /> Sign in with Google
              </button>
            )}
            onSuccess={responseGoogle}
            onFailure={responseGoogle}
            cookiePolicy="single_host_origin"
           />
         </div>
       </div>
     </div>
   </div>
  </div>
 );
};

export default Login;

Home.jsx Container

import React, { useState, useRef, useEffect } from "react";
import { AiOutlineMenu } from "react-icons/ai";
import { AiFillCloseCircle } from "react-icons/ai";
import { Link, Route, Routes } from "react-router-dom";

import { Sidebar, UserProfile } from "../components";
import { client } from "../client";
import logo from "../assets/logo.png";
import { userQuery } from "../utils/data";

const Home = () => {
const [user, setUser] = useState(null);
const userInfo =
localStorage.getItem("user") !== "undefined"
  ? JSON.parse(localStorage.getItem("user"))
  : localStorage.clear();

useEffect(() => {
  const query = userQuery(userInfo?.aud);

  client.fetch(query).then((data) => {
    setUser(data[0]);
  });
}, []);

return (
  <div className="flex bg-gray-50 flex-col md:flex-row h-screen transition-height duration-75 ease-out">
    <div className="hidden md:flex h-screen flex-initial">
      <Sidebar user={user && user} closeToggle />
    </div>
    <div className="flex md:hidden flex-row">
      <div className="p-4 w-full flex flex-row justify-between items-center shadow-md">
        <AiOutlineMenu
          fontSize={30}
          className="cursor-pointer"
        />
        <Link to="/">
          <img src={logo} alt="logo" className="w-28" />
        </Link>
        <Link to={`user-profile/${user?._id}`}>
          <img src={user?.picture } alt="user-profile" className="w-28" />
        </Link>
      </div>
    </div>
   </div>
 );
};

export default Home;

data.js The query

export const userQuery = (userId) => {
    const query = `*[_type == "user" && _id == '${userId}']`;

    return query;
}

Am expecting the user profile picture to be displayed.