I'm working on a project, and i'm trying to make a navbar that can be visible on some pages, but not on others.

I'm using states to know if its visible or not. I'm using a context to make it so that every page has a variable that if true shows the navbar, and if false does'nt.

But it just keeps giving me errors on different parts

const { showNav, setShowNav } = useContext(NavbarContext);
Here it says "Property 'showNav' does not exist on type 'boolean | null'."
and "Property 'setShowNav' does not exist on type 'boolean | null'."

'use client';
import './globals.css';
import { Inter } from 'next/font/google';
import React, { createContext, useContext, useState } from 'react';

export const NavbarContext = createContext<boolean | null>(null);

export default function Providers({
    children,
  }: {
    children: React.ReactNode
  }) {
  const [showNav, setShowNav] = React.useState(null);
    return (
        <NavbarContext.Provider value={{ showNav: showNav, setShowNav: setShowNav }}>
            {children}
        </NavbarContext.Provider>
    );
}

Here is says "Type '{ showNav: null; }' is not assignable to type 'boolean | null'."

I've tried solving the issue for hours, searching online and switching things around. I really cannot understand why it does this, I can npm run dev and it works fine, but when I do a build it fails.

Here are the logs
https://pastebin.com/uyVn9r3z