sharing data between 2 component in react. no parent child relation

Question

I have 2 component in react. for ex Producer.js and Consumer.js. . there is no parent child relationship between them.

I need to set one variable in Producer.js and consume that value in Consumer.js

I searched in google and tried using context API but it is not working. I am new so not able to resolve the issue.

so in producer.js.

 const Name = createContext(false);
  const [isActive,setIsActive]=useState(false);
  <Name.Provider value={isActive}>
            </Name.Provider>

and in consumer.js I am trying to consume isActive.

  <Name.Consumer value={isActive}>
        alert(isActive);
    </Name.Consumer>

it is not compiling.

it is not able to even recognize isActive or value in Consumer.js. what wrong I am doing?. you can also suggest if there is better way.

Edit:-1 I have actually 2 component in Menu tab. User and Inventory. I need to display User if value is true otherwise it should not display.

<span >
          <Link to="Inventory">List of Inventory</Link>
 </span>
 <span>
         <Link to="user">List of User</Link>
 </span>

I want <Link to="user"> User</Link> this to display when value is true. otherwise it should be false.

 <Name.Consumer>
    {value => 
        
      <span className="badge badge-white">
    { value && <Link to="user"> List of Users</Link> }
    </span>
    }
    </Name.Consumer>

.

List of Users tab displaying whether value is true of false. How can I modify the code?