Accessing the current state with useContext on the top level - reactjs

Question

I have a Form that has a group of checkboxes, Radio buttons and a Button.
Each time I update the value of a checkbox or radio button it dispatches an event that updates my state. I can see this state by clicking my button component: <Button context={ExampleContext} />
However, I can't seem to access my state the same way in the parent container by adding the same code snippets as it just returns undefined, this is the same logic that I have inside my Button component, so I'm not sure why it's not working.
I'm clearly doing something wrong, but I'm not sure what. How do I go about accessing my state from within the parent container?
I also have a working example here: https://codesandbox.io/s/elegant-minsky-0i4yx
Thanks for any help!
// This doesn't seem to work
const { state } = useContext(ExampleContext);
<button onClick={() => console.log(state)}>See State</button>
import React from "react";
import Checkbox from "./Checkbox";
import Radio from "./Radio";
import Button from "./Button";
import { ExampleProvider, ExampleContext } from "./ExampleContext";
const { useContext } = React;
const Form = () => {
const { state } = useContext(ExampleContext);
return (
<ExampleProvider>
<Checkbox context={ExampleContext} />
<Radio context={ExampleContext} />
<Button context={ExampleContext} />
<button onClick={() => console.log(state)}>See State</button>
</ExampleProvider>
);
};
export default Form;

Answer 1

Your useContext hook is not inside the ExampleProvider context Provider.
You can fix it like this
const Form = () => {
const { state } = useContext(ExampleContext);
return (
<>
<Checkbox context={ExampleContext} />
<Radio context={ExampleContext} />
<Button context={ExampleContext} />
<button onClick={() => console.log(state)}>See State</button>
</>
);
};
const FormWrapper = () => {
return (
<ExampleProvider>
<Form />
</ExampleProvider>
);
};
export default FormWrapper;
Look at this blogpost if you need to learn about the best way to handle the state management with React context API.