useContext

import React, { useEffect, useRef, useContext } from "react";
import { AuthContext } from "../../context/auth-context";

export const Cockpit = (props) => {
  const authContext = useContext(AuthContext);

  console.log(authContext.authenticated);

  return (
    <>
      <button onClick={authContext.login}>Log in</button>
    </>
  );
};

____________________

import React from "react";
//createContext({default value})
//the default value will apply when you don't set any other value.
export const AuthContext = React.createContext({
  authenticated: false,
  login: () => {},
});