Выпадающий список не работает с reactjs

Question

Я пытаюсь поставить выпадающее меню на моей панели навигации. Я использую фреймворк материализации, и пока это единственный материализованный элемент javascript, который я не могу заставить работать. Вот код, который я использую для панели навигации:

import React, { Component } from "react";
import M, { Dropdown } from "materialize-css";

class Navbar extends Component {

  componentDidMount() {
    M.Dropdown.init(this.Dropdown);
  }

  render() {
    return (
      <div className="navbar-fixed">
        <nav>
          <div class="nav-wrapper purple">
            <a href="/" class="brand-logo">
              Logo
            </a>
            <a class="dropdown-trigger btn right" data-target="dropdown1">
              Drop Me!
            </a>

            <ul
              id="dropdown1"
              class="dropdown-content"
              ref={Dropdown => {
                this.Dropdown = Dropdown;
              }}
            >
              <li>
                <a href="#!">one</a>
              </li>
              <li>
                <a href="#!">two</a>
              </li>
              <li class="divider" tabindex="-1" />
              <li>
                <a href="#!">three</a>
              </li>
              <li>
                <a href="#!">
                  <i class="material-icons">view_module</i>four
                </a>
              </li>
              <li>
                <a href="#!">
                  <i class="material-icons">cloud</i>five
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

export default Navbar; 

По сути, я нажимаю на элемент, и ничего не происходит. Не уверен, что я делаю неправильно, и я не могу найти ничего похожего на переполнение стека. Вот код песочницы ... https://codesandbox.io/s/dawn-snow-3cmdv

Спасибо!