Using Render Props - To explicitly define how the label is rendered, we can provide a render function as a prop

radiobuttongroup.reactAsRenderProp.tsx

export function RadioButtonGroup({ optionList, renderLabel }: RadioButtonGroupProps) {
  return (
    <div className="radio-button-group">
      {optionList.map((option) => (
        <div
          key={option.value}
          disabled={option.disabled}
          className={selected === type.value && 'option--active' || ''}
        >
          {option.icon && <span className={`icon-${option.icon}`} />}
          {renderLabel ? renderLabel(option.label) : option.label}
        </div>
      ))}
    </div>
  );
};

// Usage in Parent Component
<RadioButtonGroup
  optionList={suggestDepositAmounts}
  renderLabel={(label) => <CustomElement labelText={label} />}
/>;

const suggestDepositAmounts = [
  {
    value: "100",
    label: "100 RSD",
  }
];