Estoy aprendiendo React y tengo un problema con mi childCallback, para devolver datos del niño al padre.

Hago una barra de navegación y cuando hago clic en el botón de navegación, el padre recibe el nombre del botón anterior, tengo que hacer clic dos veces para mostrar los datos correctos.

Aquí está mi código:

 //PARENT COMPONENT export const Profil = () => { const [navActive, setNavActive] = useState("infos"); const handleCallback = (childData, e) => { setNavActive(childData); }; // View return ( <div> <Navbar callback={handleCallback} /> <Infos /> <Gpg /> {navActive} </div> ); }; //CHILD COMPONENT export const Navbar = ({ callback }) => { // Nav Items let nav = [ { key: 1, name: "infos" }, { key: 2, name: "gpg" }, { key: 3, name: "compte" }, { key: 4, name: "otp" }, { key: 5, name: "journal" }, ]; // State const [activeTitle, setActiveTitle] = useState(nav[0].name); // Change the selected nav function selectNav(e) { let selected = e.target.innerText; setActiveTitle(selected); } const onTrigger = () => { callback(activeTitle); }; // View return ( <Nav tabs> {nav.map((item) => ( <NavItem key={item.key} onClick={onTrigger}> <NavLink style={{ cursor: "pointer" }} onClick={selectNav} active={activeTitle === item.name} > {item.name} </NavLink> </NavItem> ))} </Nav> ); };

No sé cómo corregir eso.