Radio Button Selection in React Using Formik

I have successfully selected a radio button. My problem is I want to include the selection with the label also. The labels/words should be clickable also. I’m using Formik by the way

Codesandbox

CLICK HERE

   <Wrapper>
      <Item onClick={handleChecked}>
        <Button
          type="radio"
          id={name}
          name={name}
          value={value}
          checked={checked}
          onChange={handleChecked}
        />
        <RadioButtonLabel />
        <div>{label}</div>
        {error && touched && <TextError>{error}</TextError>}
      </Item>
    </Wrapper>

Answer

You should use setFieldValue instead handleChange in this case: https://codesandbox.io/s/react-styled-components-radio-button-forked-s261s?file=/src/index.js:250-262

In your App:

const {
  ...
  setFieldValue,
} = useFormik({
  ...
});

handleChange={setFieldValue}

In RadioButton:

  const handleChecked = () => {
    handleChange(name, value);
  };