Переключить меню реагирует только на первый щелчок

Question

Я пытаюсь создать переключаемое меню в реакции, меню открывается при первом щелчке, но ничего не происходит при следующих щелчках (оно должно закрываться при втором щелчке), однако оно не распознает больше щелчков после первого.

const RightMenu = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  const handleClick = e => {
    const el = document.getElementById("menu");
    if (menuOpen === false) {
      el.style.display = "block";
      setMenuOpen(true);
      console.log("menu opened: ");
      console.log(el);
    }
    if (menuOpen === true) {
      el.style.display = "none";
      setMenuOpen(false);
      console.log("menu closed");
      console.log(el);
    }
  };
return (
    <div style={style ? style : ""}>
      <div
        className="text-center"
        style={{
          borderTopLeftRadius: "10px",
          borderTopRightRadius: "10px",
          cursor: "pointer",
          display: "block"
        }}
        onClick={e => handleClick(e)}
      > Toggle div
      </div>
<div className="" id="menu" style={{ display: "none" }}>
menu to show
</div>
 );
};

любая помощь будет оценена.

Answer 1

Я пробовал код на Repl, и он работал нормально.

import React, {Component, useState } from 'react';
import logo from './logo.svg';
import './App.css';
const App = () => {
const [menuOpen, setMenuOpen] = useState(false);

const handleClick = e => {
    const el = document.getElementById("menu");
    if (menuOpen === false) {
        el.style.display = "block";
        setMenuOpen(true);
        console.log("menu opened: ");
        console.log(el);
    }
    if (menuOpen === true) {
        el.style.display = "none";
        setMenuOpen(false);
        console.log("menu closed");
        console.log(el);
    }
};
return ( < div >
    <  div className = "text-center"
    style = {
        {
            borderTopLeftRadius: "10px",
            borderTopRightRadius: "10px",
            cursor: "pointer",
            display: "block"
        }
    }
    onClick = {
        e => handleClick(e)
    } >
    Toggle div <
    /div> < div className = "form-group" id = "menu" style = { { display: "none" } } >  menu to show < /div> < /div>
);
};
export default App;