Nav Bar не скрывается с состоянием реакции

Question

У меня есть два navbar на моем сайте. Один отображается только на маленьких экранах с медиа-запросом, с которым у меня возникают проблемы. У меня есть контекст реакции, который управляет видимостью обоих навигационных элементов с одной и той же логической переменной при показе слайд-шоу. Когда показ слайдов, я хочу скрыть навигацию. Большая навигация имеет эту функциональность, но маленькая навигация никогда не показывается. Перед добавлением этого контекста реакции панель навигации отображалась бы как обычно, но теперь она никогда не отображается.

малая визуализация панели навигации:

  render() {
    return (
      <div className="container-fluid">
        <div id="initialImage">
          <div className="d-fixed d-md-none">
            <DisplayContext.Consumer>
              {(context) =>
                context.state.isNavVisibile ? (
                  <nav className="navbar bg-dark navbar-dark fixed-top">
                    <button
                      className="navbar-toggler"
                      type="button"
                      data-toggle="collapse"
                      data-target="#navbarToggleContent"
                      aria-controls="navbarToggleContent"
                      aria-expanded="false"
                      aria-label="Toggle navigation"
                    >
                      <span></span>
                      <span></span>
                      <span></span>
                    </button>
                    <div
                      className="collapse navbar-collapse"
                      id="navbarToggleContent"
                    >
                      <ul className="navbar-nav">
                        <li className="nav-item">
                          <a
                            className="nav-link text-white font-weight-bold"
                            href="#vintage"
                          >
                            Shop Vintage 
                          </a>
                        </li>
                        <li className="nav-item">
                          <a
                            className="nav-link text-white font-weight-bold"
                            href="#e"
                          >
                            Shop Euiubi
                          </a>
                        </li>
                        <li className="nav-item">
                          <a
                            className="nav-link text-white font-weight-bold"
                            href="#about"
                          >
                            A Message from the Creator
                          </a>
                        </li>
                        <li className="nav-item">
                          <a
                            className="nav-link text-white font-weight-bold"
                            href="#"
                          >
                            Contact
                          </a>
                        </li>
                      </ul>
                    </div>
                  </nav>
                ) : null
              }
            </DisplayContext.Consumer>
          </div>
          <Navigation />
          <div id="titles" className="clearfix greeting"></div>
          <ScrollAnimation />
        </div>
      </div>
    );
  }
}

Контекст отображения:

export const DisplayContext = createContext();

export class ContextProvider extends Component {
  state = {
    isNavVisible: true,
  };

  render() {
    return (
      <DisplayContext.Provider
        value={{
          state: this.state,
          hideNav: () =>
            this.setState({ isNavVisible: !this.state.isNavVisible }),
        }}
      >
        {this.props.children}
      </DisplayContext.Provider>
    );
  }
}

на обработчике кликов для открытия и закрытия слайд-шоу

  toggleSlideVisibility = () => {
    const dcontext = this.context;
    dcontext.hideNav();
    this.setState({ slidesVisible: !this.state.slidesVisible });
  };