Custom NavBar for my website (WIP)

import React, { useState } from "react";
import { NavLink } from "react-router-dom";

const Nav = ({ className }) => {
    const [showPremiumPlans, setShowPremiumPlans] = useState(false);

    const handlePurchaseClick = () => {
        setShowPremiumPlans(true);
    };

    const closePremiumPlans = () => {
        setShowPremiumPlans(false);
    };

    const links = [
        { to: "/", label: "Home" },
        { to: "/", refto: "about", label: "About" },
        { to: "/menu", label: "Menu" }
    ];

    return (
        <div key={className} className={className}>
            <nav>
                <ul>
                    {links.map((link, index) => (
                        <NavLink key={index} to={link.to} activeClassName="active" {...link}>
                            <li>{link.label}</li>
                        </NavLink>
                    ))}
                    <a href="#purchase" onClick={handlePurchaseClick}><li>Purchase</li></a>
                    <a href="#account"><li>settings here</li></a>
                    <a href="#login"><li>Login</li></a>
                </ul>
            </nav>
            {showPremiumPlans && (
                <div className="premium-plans-modal">
                    <h2>Premium Plans</h2>
                    {/* premium plans here */}
                    <button onClick={closePremiumPlans}>Close</button>
                </div>
            )}
        </div>
    );
};

export default Nav;