foo.js

function RadioGroup({ onChange, name, children }) {
  const [state, inputProps] = useRadioGroup(name)
  return (
    <Context.Provider value={inputProps}>
      {children}
    </Context.Provider>
  )
}

function RadioInput(props) {
  const context = useContext(Context)
  return (
    <label>
      <input {...props} {...context} />
    </label>
  )
}

function App() {
  return (
    <RadioGroup name="snack" onChange={handleChange}>
      <div>
        <RadioInput label="Popcorn" value="pop-corn" />
      </div>
      <RadioInput label="Popcorn" value="pop-corn" />
      <RadioInput label="Popcorn" value="pop-corn" />
    </RadioGroup>
  )
}