Showing white blank screen with the use of context api in React js

Showing white blank screen with the use of context api in React js I'm running my code which has no errors, but when I take a trip to localhost:3000 I get a blank screen. These are the React js files in the project, If I don't use the Context-API, coding is doing great.

 App.js
import "./App.css";
import { UserContextProvider } from "./contexts/user";
import { Home } from "./pages";
function App() {
  return (
    <div className="app">
      <UserContextProvider>
        <Home />
      </UserContextProvider>
    </div>
  );
}

export default App;

    user.js
import { createContext, useState } from "react";
export const UserContext = createContext();
export const UserContextProvider = (props) => {
  const [user, setUser] = useState(null); // user value can be used anywhere

  return (
    <UserContext.Provider value={{user: [user,setUser]}}>
    {props.childern}
    </UserContext.Provider>
  );
};

 SignInBtn.js
    import React,{useContext} from "react";
    import "./style.css";
    import GoogleIcon from "@mui/icons-material/Google";
    import { signInWithGoogle } from "../../services/auth";
    import { UserContext } from "../../contexts/user";
    const icon = {
      fontSize: 14,
    };
    function SignInBtn() {
      const [user, setUser] = useContext(UserContext).user;
    
      const signInBtnClick = async () =>{
        let userBySignIn = await signInWithGoogle()
        if(userBySignIn) setUser(userBySignIn)
      }
      return (
        <div className="signInBtn" onClick={signInBtnClick}>
          <div className="btn">
          <p>Signin with&nbsp;</p>
          <GoogleIcon style={icon}/>
          </div>
        </div>
      );
    }
    
    export default SignInBtn;