useContext() second argument is reserved for future use in React. Passing it is not supported

Question

I have a lot of globally declared states in my application. I used useContext for implementing it, however, I keep getting a bunch of errors in the console regarding useContext. Error:

Warning: useContext() second argument is reserved for future use in React. Passing it is not supported. You passed: false.
    in Navbar (at Home.js:11)
    in Home (created by Context.Consumer)
    in Route (at App.js:96)
    in Switch (at App.js:76)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:74)
    in App (at src/index.js:7)
    in StrictMode (at src/index.js:6)

App.js:

import React, { useState, useEffect } from 'react';
import { Redirect } from 'react-router-dom';
import './App.css';
import Home from '../pages/Home';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Restaurants from '../pages/Restaurants';
import ScrollToTop from '../components/ScrollToTop';
import UserAccount from '../pages/UserAccount'
import Footer from '../components/footer/Footer';
import { UserContext } from '../UserContext';

function App() {
  const [clickedDistrict, setClickedDistrict] = useState(false);
  const [clickedSuggestion, setClickedSuggestion] = useState(false);
  const [checkedDistance, setCheckedDistance] = useState("1000")
  const [restaurants, setRestaurants] = useState([]);
  const [clickedUserMenuItem, setClickedUserMenuItem]
    = useState("saved")
  const [goodPassword, setGoodPassword] = useState(false)
  const [chosenRestaurant, setChosenRestaurant] = useState(false);
  const [generalSearchPath, setGeneralSearchPath] = useState(false);
  const [incorrectPassword, setIncorrectPassword] = useState(false);
  const [successfullLogin, setSuccessfullLogin] = useState(false)
  const [username, setUsername] = useState(false)
  const [incorrectOldPassword, setIncorrectOldPassword] = useState(false)
  const [logout, setLogout] = useState(false);
  const [newUsername, setNewUsername] = useState(false)
  const [incorrectPasswordOnDelete, setIncorrectPasswordOnDelete] = useState(false)
  const [deleteAccount, setDeleteAccount ] = useState(false)

  return (
    <>
      <Router>
        <ScrollToTop />
        <Switch>
          <UserContext.Provider value={{
            clickedDistrict, setClickedDistrict,
            clickedSuggestion, setClickedSuggestion,
            checkedDistance, setCheckedDistance,
            restaurants, setRestaurants,
            clickedUserMenuItem, setClickedUserMenuItem,
            goodPassword, setGoodPassword,
            chosenRestaurant, setChosenRestaurant,
            generalSearchPath, setGeneralSearchPath,
            incorrectPassword, setIncorrectPassword,
            successfullLogin, setSuccessfullLogin,
            username, setUsername,
            incorrectOldPassword, setIncorrectOldPassword,
            logout, setLogout,
            newUsername, setNewUsername,
            incorrectPasswordOnDelete, setIncorrectPasswordOnDelete,
            deleteAccount, setDeleteAccount
          }}>
            <Route path='/' exact component={Home} />
            <Route path='/restaurants' component={Restaurants} />
            { (successfullLogin && !logout && !deleteAccount) ?
              <Route path='/user' component={UserAccount} />
              :
              <>
               <Route path='/user' component={UserAccount} />
              <Redirect to='/' /></>
          }
          </UserContext.Provider>
        </Switch>
        <Footer />
      </Router>
    </>
  );
}

export default App;

UserContext.js:

import { createContext } from "react";

export const UserContext = createContext();

I tried searching about this warning but nothing helped. I don't even understand the reason for this error. Which second argument does it imply?

Also, the weird thing is that I have theese states used throughout the application, but the error shows that I have a problem in the navbar on the Home page. Home:

import React from 'react';
import Cards from '../components/cards/Cards';
import HeroSection from '../components/hero/HeroSection';
import Districts from '../components/districts/Districts';
import Navbar from '../components/navbar/Navbar';
import CollegeSection from '../components/college/CollegeSection';

function Home() {
  return (
    <>
      <Navbar />
      <HeroSection />
      <Cards />
      <CollegeSection />
      <Districts />
    </>
  );
}

export default Home;

import React, { useEffect, useContext } from 'react';
import { Button } from '../button/Button';
import MobileNavbar from './MobileNavbar'
import { Link } from 'react-router-dom';
import './Navbar.css';
import { Modal } from '../forms/Modal'
import Searchbox from '../search/Searchbox';
import NavbarLogic from './NavbarLogic';
import { UserContext } from '../../UserContext';
import UserNavbar from '../user/UserNavbar';

function Navbar() {
  const { click, button, showButton,
          handleClick, closeMenuDiscardChanges, closeMenuOpenPCRestaurants }
    = MobileNavbar();
  const { navMenuClassName, searchbox, showLogInModal,
          showSignUpModal, openLogInModal, openSignUpModal,
          setShowLogInModal, setShowSignUpModal }
    = NavbarLogic();
  const { successfullLogin, setSuccessfullLogin, logout }
    = useContext(UserContext);

  useEffect(() => {
   showButton();
  }, [showButton]);

  useEffect(() => {
    if (logout) {
      setShowLogInModal(false);
      setSuccessfullLogin(false)
    }
  }, [logout,setSuccessfullLogin,setShowLogInModal])


  window.addEventListener('resize', showButton);

  return (
    <>
      <nav className={click ? 'navbar active' : 'navbar'}>
        <div className='navbar-container'>
          <Link to='/' className='navbar-logo' onClick={closeMenuDiscardChanges}>
           Restaurateur<i class="fas fa-utensils" />
          </Link>
          <div className={click ? 'hidden' : searchbox}>
            <Searchbox />
          </div>
          <div className='menu-icon' onClick={handleClick}>
            <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
          </div>
          <ul className={click ? 'nav-menu active' : navMenuClassName}>
            <li className='nav-item'>
              <Link to='/' className='nav-links' onClick={closeMenuDiscardChanges}>
                Home
              </Link>
            </li>
            <li className='nav-item'>
              <Link
                to='/restaurants'
                className='nav-links'
                onClick={setRestaurantsNavLink() === "All Restaurants" ?
                  closeMenuDiscardChanges
                  :
                  closeMenuOpenPCRestaurants}
              >
                {setRestaurantsNavLink()}
              </Link>
            </li>
            <li>
              <Link
                className='nav-links-mobile'
                onClick={openLogInModal}
              >
                Log In
              </Link>

              <Link
                className='nav-links-mobile'
                onClick={openSignUpModal}
              >
                Sign Up
              </Link>
            </li>
          </ul>
          {successfullLogin  === true  ?
            <UserNavbar />
            :
            <>
            {button &&
              <Button
                buttonStyle='btn--outline'
                buttonSize='btn--medium'
                onClick={openLogInModal}
                id="login">
                LOG IN
            </Button>}
            <Modal
              showLogInModal={showLogInModal}
              setShowLogInModal={setShowLogInModal}
            />
            {button &&
              <Button
                id="signup"
                buttonSize='btn--medium'
                onClick={openSignUpModal}>
                SIGN UP
            </Button>}
            <Modal
              showSignUpModal={showSignUpModal}
              setShowSignUpModal={setShowSignUpModal}
            />
          </>}
        </div>
      </nav>
    </>
  );
}

export default Navbar;

How can I get rid of this useContext warning?

Edit: This is how I use useContext in Mobilenavbar:

  import { useState, useContext } from 'react';
import { UserContext } from "../../UserContext"

const MobileNavbar = () => {
  const [click, setClick] = useState(false);
  const [button, setButton] = useState(true);
  const { setPragueCollegePath } = useContext(UserContext)
  const { setClickedDistrict, setClickedSuggestion } = useContext(UserContext)
  const { setChosenRestaurant, setGeneralSearchPath } = useContext(UserContext);

  const handleClick = () => setClick(!click);

  const closeMenuOpenRestaurants = () => {
    setClick(false);
    setClickedDistrict(false);
    setClickedSuggestion(false);
    setChosenRestaurant(false);
    setGeneralSearchPath(false)
  }
  const closeMenuOpenPCRestaurants = () => {
    setClick(false);
    setClickedDistrict(false);
    setClickedSuggestion(false);
    setChosenRestaurant(false);
    setGeneralSearchPath(false);
  }

  const closeMenuDiscardChanges = () => {
    setClick(false);
    setClickedDistrict(false)
    setClickedSuggestion(false)
    setChosenRestaurant(false)
    setGeneralSearchPath(false);
   }

  const showButton = () => {
    if (window.innerWidth <= 1120) {
      setButton(false);
    } else {
      setButton(true);
    }
  };

  const showSearch = () => {
    if (window.innerWidth <= 820) {
      setButton(false);
    } else {
      setButton(true);
    }
  };

  return {
    click, button, showButton, handleClick,
    showSearch, closeMenuOpenRestaurants,
    closeMenuOpenPCRestaurants, closeMenuDiscardChanges
  }

}

export default MobileNavbar;

And here is NavbarLogic:

  const {successfullLogin, setSuccessfullLogin, logout }
    = useContext(UserContext);

I usually import all the variables together.