setLoggedIn is not a function react

Question

Okay I'm trying to use global states to store if an user is logged in or not. To do so, I've created a Context file as follows:

import { createContext } from "react";

export const LoginContext= createContext({})

I also have my App.jsx:

import React, { useState } from 'react';
import Component1 from './Component1.jsx';
import Component2 from './Component2.jsx';
import Component3 from './Component3.jsx';

import { LoginContext } from '../Helper/Context.js';

function App(){
  const [loggedIn, setLoggedIn] = useState(false);
  
  return (
      <LoginContext.Provider value={{loggedIn, setLoggedIn}}>   
          <Component1 />
          <Component2 />
          <Component3 />
      </LoginContext.Provider>
  )
}

export default App;

And then I have my Login component:

import React, {useState, useContext} from "react";
import Axios from 'axios';
import { Link, useHistory } from 'react-router-dom';
import { LoginContext } from "../Helper/Context";

import NavbarHome from "./NavbarHome";

function Login()
{
  Axios.defaults.withCredentials = true;

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const [loginStatus, setLoginStatus] = useState(false);
  const {loggedIn, setLoggedIn} = useContext(LoginContext);

  const [error, setErrorStatus] = useState("");

  let history = useHistory();

  let user = {
    id: null,
    nombre: null, 
    email: null          
  };

  const login = () => {
    Axios.post('http://localhost:3001/login', {
        email: email, 
        password: password,
    }).then((response)=>{      
      if(!response.data.auth) { 
        setLoginStatus(false);
        setErrorStatus(response.data.message)
        setLoggedIn(false);
      }
      else{
        localStorage.setItem("token", response.data.token)
        user = {
          id: response.data.result[0].id,
          name: response.data.result[0].name,
          email: response.data.result[0].email          
        }
        setLoginStatus(true);
        setLoggedIn(true);
        history.push('/perfil');
      } 
    });
  };

  const userAuthenticated = () => {
    Axios.get("http://localhost:3001/isUserAuth", {
      headers: {
        "x-access-token": localStorage.getItem("token"),
      },
    }).then((response) => {
      console.log(response);
    });
  }

  return(
    <div>
      <div>
      <NavbarHome />
        <div>
          <div>
            <h1>Login</h1>
            <p className="label-login">Email:</p>
            <input type="text" placeholder="Email..." onChange={(event) => {setEmail(event.target.value);}}/>
            <p className="label-login">Contraseña:</p>
            <input type="password" placeholder="Password..." onChange={(event) => {setPassword(event.target.value);}}/> <br />

            <button onClick={login}>Login</button>
            <p style={{marginTop: '1.3rem', color: 'red'}}>{error}</p>
            <p><Link to='/registro'>Register here!</Link></p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;

The output that I receive is this:

It complains about the line where I do this: setLoggedIn(false); or setLoggedIn(true); I'd like to use that state instead of setLoginStatus (which is the one I'm currently using)

Any ideas on how to fix it?