Tengo este código y estoy tratando de hacer que funcione el botón desplegable. Puedo hacer que aparezca el botón, pero no sucede nada cuando se hace clic.

 import React, {useContext} from 'react'; import {Link, useNavigate} from 'react-router-dom'; import {UserContext} from '../App' import M from 'materialize-css' const NavBar = ()=>{ const navigate = useNavigate() const {state, dispatch} = useContext(UserContext) const renderList = () =>{ if(state){ return [ <div> <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a> <ul id='dropdown1' class='dropdown-content'> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li class="divider" tabindex="-1"></li> <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> ] } else{ return [ <li><Link to="/login">Login</Link></li>, <li><Link to="/signup">Sign Up</Link></li> ] } } return( <nav> <div className="nav-wrapper green" > <Link to= {state?"/":"/login"} className="brand-logo left">FungEye</Link> <ul id="nav-mobile" className="right"> {renderList()} </ul> </div> </nav> ) } export default NavBar;

Me gustaría que el botón desplegable se desplegara con la lista como se esperaba.