make dropdown menu visible using react

I have following code with navbar and dropdown in it. All I want is to make the dropdown visible but I am not able to do it. What should I do. I have my code as
Header.jsx

import React, { useState } from 'react'
import { Link } from 'react-router-dom';

const Header = () => {
    const [isVisible, setIsVisible] = useState(false);

  
        return(
    

       
            <div className="menu-container">
                <nav className="nav">
                    <ul className="nav__menu">
                        <li className="nav__menu-item">
                            <Link to="Aboutus">About us</Link>
                            
                        </li>
                        <li className="nav__menu-item">
                            <Link to="Myaccount">My account</Link>
                            
                        </li>
                        <li className="nav__menu-item">
                            <Link to="Featured Product">Featured Product</Link>
                        
                        </li>
                        <li className="nav__menu-item">
                            <Link to="WishList">WishList</Link>
                        
                        </li>
                        <li className="nav__menu-items">
                            <Link to="Order Tracking">Order Tracking</Link>
                        
                        </li>
                        <li className="nav__menu-items">
                                <Link to="English">English</Link>
                                {isVisible && (
                                    <div>
                                <Link to className="box">English</Link>
                                <Link to className="box">German</Link>
                                <Link to className = "box">Spanish</Link>
                                        </div>
                                )}
                        
                        </li>
                        <li className="nav__menu-items">
                            <Link to="USD">USD</Link>
                            {isVisible && (
                                <div>
                                <Link to className="box">USD</Link>
                                <Link to className="box">INR</Link>
                                    <Link to className="box">GBP</Link>
                                    </div>
                            )}
                        
                        </li>
                        </ul>
                        </nav>
                        
                </div>
                
    



      )
    }
  
  export default Header

The code in the English and USD contains the dropdown but I am not able to make it possible visible. How can I make it visible.

>Solution :

Try this.

import React, { useState } from 'react'
import { Link } from 'react-router-dom';

const Header = () => {
    const [isVisible, setIsVisible] = useState(false);
    const toggle = () => {setIsVisible(!isVisible)}

  
        return(     
            <div className="menu-container">
                <nav className="nav">
                    <ul className="nav__menu">
                        <li className="nav__menu-item">
                            <Link to="Aboutus">About us</Link>
                            
                        </li>
                        <li className="nav__menu-item">
                            <Link to="Myaccount">My account</Link>
                            
                        </li>
                        <li className="nav__menu-item">
                            <Link to="Featured Product">Featured Product</Link>
                        
                        </li>
                        <li className="nav__menu-item">
                            <Link to="WishList">WishList</Link>
                        
                        </li>
                        <li className="nav__menu-items">
                            <Link to="Order Tracking">Order Tracking</Link>
                        
                        </li>
                        <li className="nav__menu-items">
                                <Link to="English" onClick={toggle}>English</Link>
                                {isVisible && (
                                    <div>
                                <Link to className="box">English</Link>
                                <Link to className="box">German</Link>
                                <Link to className = "box">Spanish</Link>
                                        </div>
                                )}
                        
                        </li>
                        <li className="nav__menu-items">
                            <Link to="USD" onClick={toggle}>USD</Link>
                            {isVisible && (
                                <div>
                                <Link to className="box">USD</Link>
                                <Link to className="box">INR</Link>
                                    <Link to className="box">GBP</Link>
                                    </div>
                            )}
                        
                        </li>
                        </ul>
                        </nav>
                        
                </div>
                
    



      )
    }
  
  export default Header