Pass Context between Siblings Using Context in React

export const NumberContext = React.createContext();

function App() {
    const [foo, changeFoo] = useState('foo')
    return (
        <NumberContext.Provider value={{ foo, changeFoo }}>
            <TheButton />
            <Display />
        </NumberContext.Provider>
    );
}


function TheButton() {
    const { changeFoo } = useContext(NumberContext)
    return (
        <button onClick={() => changeFoo('bar')}>Click me</button>
    );
}

function Display() {
    const context = useContext(NumberContext);
    return <div>The answer {context.foo}.</div>;
}