I have this code, and am trying to get the dropdown button to work. I can get the button to appear but nothing happens when clicked.

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;

I would like the dropdown button to dropdown with the list as expected.