Guidance needed for customizing Radio about informed HOT 5 CLOSED

import React, {createContext, useContext} from "react";
import {Form, useField } from "informed";

const App = () => {
  return (
    <Form>
      <IRadioGroup name="radiogroup" label="Number Selection" initialValue="one">
        <IRadio value="one" label="One" id="one" />
        <IRadio value="two" label="Two" id="two" />
        <IRadio value="three" label="Three" id="three" />
      </IRadioGroup>
    </Form>
  );
}

export default App;

//create Context
const RadioGroupContext = createContext();

//custom Radio Group
const IRadioGroup = props => {
  const { fieldApi, fieldState, userProps } = useField(props);

  const groupContext = {
    radioGroupApi: fieldApi,
    radioGroupState: fieldState,
    ...props
  };

  const { label, id, options, children } = userProps;
  const { showError, error } = fieldState;

  return (
    <RadioGroupContext.Provider value={groupContext}>
      <fieldset aria-describedby={`${id}-error`}>
        {label ? <legend>{label}</legend> : null}
        {children}
        {showError ? (
          <small role="alert" id={`${id}-error`}>
            {error}
          </small>
        ) : null}
      </fieldset>
    </RadioGroupContext.Provider>
  );
}

//custom Radio
const IRadio = ({ label, value, ...props }) => {

  const { radioGroupApi, radioGroupState } = useContext(RadioGroupContext);

  const { setValue, setTouched } = radioGroupApi;

  const { value: groupValue, showError } = radioGroupState;

  return (
    <>
      <input
        {...props}
        aria-invalid={!!showError}
        value={value}
        checked={groupValue === value}
        onChange={e => {
          if (!e.target.checked) {
            return;
          }
          setValue(value, e);
        }}
        onBlur={e => {
          setTouched(true, e);
        }}
        type="radio"
        id={value}
      />
      <label htmlFor={value}>{label}</label>
    </>
  );
};