Trouble making dropdown buttons within navbar clickable in react

I managed to make the buttons activate a dropdown menus that disappear when you click off, but the problem is that when you click any button, all of the dropdowns appear. It seems that when I try to set the state of one button, it sets the state of all buttons. I want the state of each button to have a displayMenu variable that is either true or false. When a button is clicked, it should change its displayMenu state to true, and false when clicked off. What am I doing wrong here?

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './NavBar.css'; 
import './Body.css'
class NavBar extends Component {
  state = {
    displayMenu: false 
  }

  showDM = () => {
    const displayMenu = true;
    this.setState({ displayMenu }, () => {
      document.addEventListener('click', this.hideDM);
      //document.getElementById("ddc").classList.toggle('show');
    });
  }

  hideDM = (ev) => {
    this.setState({ displayMenu: false }, () => {
      document.removeEventListener('click', this.hideDM)
      //document.getElementsByClassName("dropdown-content").classList.remove('show');

    });
  }

  render() {
    return (
      <header>
        <div className="navbar">
          <div className="dropdown">
            <button onClick={this.showDM} className="dropbtn">About 
              <i className="fa fa-caret-down"></i>
            </button>
            { this.state.displayMenu ? ( 
            <div className="dropdown-content" id="ddc">
              <a href="#mission"><Link to="/mission">Mission</Link></a>
              <a href="#history"><Link to="/history">History</Link></a>
              <a href="#alumni"><Link to="/alumni">Alumni</Link></a>
            </div>
            ):
            ( 
              null 
            )
            }
          </div>
          <div className="dropdown">
            <button onClick={this.showDM} className="dropbtn">Academics 
              <i className="fa fa-caret-down"></i>
            </button>
            { this.state.displayMenu ? (
            <div className="dropdown-content" id="ddc">


              <a href="#curriculum"><Link to="/curriculum">Our Curriculum</Link></a>
              <a href="#study-abroad"><Link to="/study-abroad">Study Abroad</Link></a>
            </div>
            ):
            ( 
              null 
            )
            }
          </div> 

}
export default NavBar;