Function not triggering on click

The function is not triggering when I press on the NavButton component.

I'm new to React.js and I'm trying to call the setCurrentActive function when NavButton gets clicked, but nothing happens. Am I doing it wrong?

import React, { useState } from 'react';
import '../css-files/navbar.css';
import logo from '../assets/svg/logo.svg';

export default function Navbar() {

    function setCurrentActive() {
        console.log("works")
    } 
    
    return (
            <div className="Navbar" id="myNavBar">
            <img className="logo" src={logo} alt=''/>
            <ul className="links" id="Links">
                <NavButton id={1}label="ACASĂ" onClick={setCurrentActive}/>
                <NavButton id={2}label="ACUSTICE"/>
                <NavButton id={3}label="CLASICE"/>
                <NavButton id={4}label="ELECTRICE"/>
            </ul>
            <a href="/" className="icon">
                <img src="../assets/png/menu.png" alt=""/>
            </a>
            </div>
    );
}

function NavButton(props) {
    const [name, setName] = useState(props.id === 1 ? "active" : "");

    function changeName() {
        if (name === "")
            setName("active");
        else
            setName("");
    }

    return (
        <li className={name} onClick={changeName}>
            {props.label}
        </li>   
    )
}

NavButton is a custom component, so it doesn't have an onClick listener, so if you are passing any props to the' custom' component, you need to handle it.

To handle that, you just need to pass if (props.onClick) props.onClick(); in your native onClick button listener.

import React, { useState } from 'react';
import '../css-files/navbar.css';
import logo from '../assets/svg/logo.svg';
export default function Navbar() {
function setCurrentActive() {
console.log("works")
} 
return (
<div className="Navbar" id="myNavBar">
<img className="logo" src={logo} alt=''/>
<ul className="links" id="Links">
<NavButton id={1}label="ACASĂ" onClick={setCurrentActive}/>
<NavButton id={2}label="ACUSTICE"/>
<NavButton id={3}label="CLASICE"/>
<NavButton id={4}label="ELECTRICE"/>
</ul>
<a href="/" className="icon">
<img src="../assets/png/menu.png" alt=""/>
</a>
</div>
);
}
function NavButton(props) {
const [name, setName] = useState(props.id === 1 ? "active" : "");
function changeName() {
if (props.onClick) props.onClick();
if (name === "")
setName("active");
else
setName("");
}
return (
<li className={name} onClick={changeName}>
{props.label}
</li>   
)
}