Передайте значение, чтобы реагировать на контекст от потребителя

Question

** context **

export const NavProvider = (props) => {
    const [gate, setGate] = useState({
        navState:["start"]
    });
    console.log(nav);

    const newNav = (navState) => {
        setGate({ ...nav, navState });
    };


    return (
        <NavContext.Provider value={{ gate, newNav }}>
            {props.children}
        </NavContext.Provider>
    );
}

** Это мой потребитель **

const Start = (props) => {
const { newNav } = useContext(NavContext);
console.log(newNav);

const [navState, setNavState] = useState("");

console.log(navState);

const navigate = (e) => {
    newNav(navState);
    setNavState({ navState: "profile" });
    // props.history.push("/profile");
}

return (
    <div>
        <Navbar />
        start
        <button onClick={navigate}>next buttton </button>
    </div>
);

}

экспорт по умолчанию Start;

** Я хочу передать значение в мой массив, когда я нажимаю кнопку на странице потребителя, используя useContext для этого t **