Пользовательский SVG в качестве переключателя в компоненте более высокого порядка?

Question

Я пытаюсь заменить переключатель на пользовательский SVG в RadioButton HOC.

Вот как выглядит index.jsx компонента:

const text = {
  radio: 'radio',
};

export const RadioButton = ({ srcRadio, labelText, value, checked, onChange, name }) => (
  <div className={styles.button}>
    <input
      checked={checked}
      className={styles.input}
      type={text.radio}
      name={name}
      value={value}
      onChange={onChange}
    />
    <label className={styles.label}>
      <img alt="" src={srcRadio} />
        {labelText}
    </label>
  </div>
);

И файл enhanced.js:

import radioChecked from 'components/UI/images/radio-checked.svg';
import radioUnchecked from 'components/UI/images/radio-unchecked.svg';

export const srcRadio = ({ checked }) =>
  checked ? radioChecked : radioUnchecked;

export const checked = ({ currentValue, value }) => currentValue === value;

export default compose(
  setDisplayName('OpportunityPageFeatures/RadioButtonEnhanced'),
  addProps({ checked }),
  addProps({ srcRadio }),
);

Это нормально, но моя функция onClick работает только с переключателем реального ввода. Если я не отображаю его и не нажимаю на изображение / метку, то функция не вызывается. Мне нужно, чтобы оно отображалось, и оно выглядит так: