Reactjs 在子对象中单击事件(触发函数)后，将值从子对象传递给父对象

在<Nav/>组件中，雪佛龙<button>上的"点击事件"触发useNextTitle.js自定义挂钩中的nextTitle(length)功能.此函数设置val的值，该值由useNextTitle.js返回.如何将新的val传给App.js？

更大的画面:我想在<Nav />中的"点击事件"之后，在<Dod />和<Analogia />之间(在App.js中)更改显示(计算出val会有帮助，作为条件语句中的一个参数).

我试图实现的功能在我用vanilla Java Script:link完成的网站上可视化(蓝色导航，当雪佛龙点击时，将"主页"更改为"标题")

App.js

import Nav from "./components/Nav";
import Dod from "./components/Dod";
import Analogia from "./components/Analogia";

function App() {

  return (

   <div className="App">

     <Nav />

     <Dod />

     <Analogia />


   </div>
     );
}

export default App

Nav.js

import useNextTitle from './useNextTitle';
import './Nav.css';

const Nav = () => {

  const navData = [
    {id: 0, text: "DOD"},
    {id: 1, text: "analogia"}
  ]

  const length = navData.length;

  const { val, nextTitle } = useNextTitle();

  return (
    <nav>
    <div>


        {/* titles */}
        <ul>
            <li key="li1">
                {navData.map((title, index) => {
                    return (
                        <div 
                            className={index === val ? "active" : "display-none"} key={title.id}>
                            {title.text}
                        </div>
                    )
                })}
            </li>
        </ul>

        {/* chevron button */}
        <div>
            <button onClick={() => nextTitle(length)}>
                <span className="material-icons">
                    chevron_right
                </span>
            </button>
        </div>
        
    </div>
    </nav>
  )
}
export default Nav

useNextTitle.js

import { useState } from 'react';

const useNextTitle = () => {

    const [val, setVal] = useState(0);

    const nextTitle = (length) => {
        setVal(val === length -1 ? 0 : val + 1 )
        console.log("hook vav = " + val)
    }
    return { val, nextTitle }
}

export default useNextTitle;