context is not behaving properly in react

I created below context in react.

NameContext.tsx

import { createContext } from 'react';
export  const AppContext = createContext(""); 

I used this context inside my Layout.tsx . I am using inside Layout because I have some business logic to execute. based on that isActive value will be set.

const [isActive,setIsActive]=useState("NO");
return(
    <AppContext.Provider value={isActive}>
             <User/>
     </AppContext.Provider> 
)

now under User.tsx I am accessing this tab.

import { useContext } from "react";
import { Link } from "react-router-dom"
import { AppContext } from "../context/NameContext";

const User = ()=>{

 const context = useContext(AppContext);
  let isActive:any;

 if(context=="YES")
  isActive=true;

  else
  isActive=false;

  console.log("context is:"+context);
  console.log(isActive);
  
    return(
        <>
                  <span>
                 {isActive && <Link to="user" > List of Users</Link> } 
                  </span>

          </>        

    )
}
export default User;

in just one page refresh it is delivering values many times and most of the time default values. I dont want default values but the value which I set in provider.
how can I avoid this abnormal behaviour.