TypeScript Bug : Type ‘null’ is not assignable to type ‘SetStateAction

This is my App.tsx file. So I was following a video with JavaScript, but while writing that in TypeScript VS Code is showing these bugs:

Source Code:

import React, { useEffect, useState } from 'react';
import './output.css'; // Adjust path if necessary
import {auth, provider} from './config' ;
import { signInWithPopup } from 'firebase/auth';
import Home from './Home';

function SignIn(){

  const [value,setValue] = useState('')
  const handleClick = () => {
    signInWithPopup(auth, provider).then((data) => {
      setValue(data.user.email)
      localStorage.setItem("email", data.user.email)
    })
  }

  useEffect(() => {
    setValue(localStorage.getItem('email'))
  })

return (
  <div>
  {value?<Home/>:
    <button onClick={handleClick} className='px-2 bg-blue-600 text-white hover:bg-blue-900 pt-2 pb-2 pl-3 pr-3 rounded-md'>Sign in with Google</button>
  }
  </div>
);
}
export default SignIn;

In line 12: data.user.email Argument of type ‘string | null’ is not assignable to parameter of type ‘SetStateAction’.
Type ‘null’ is not assignable to type ‘SetStateAction’.ts(2345)
(property) UserCredential.user: User

In line 12: data.user.email Argument of type ‘string | null’ is not assignable to parameter of type ‘string’.
Type ‘null’ is not assignable to type ‘string’.ts(2345)

In line 18: localStorage.getItem(’email’) Argument of type ‘string | null’ is not assignable to parameter of type ‘SetStateAction’.
Type ‘null’ is not assignable to type ‘SetStateAction’.ts(2345)

I expected writing js in ts would not make problem but in ts as i need to give certain types to variables may be that’s why these errors are occuring…

How to fix this?