reactjs - Not able to handle change/click on inner elements (displyed using onRenderField) of ChoiceGroup in office-ui-fabric-react

Question

I have to handle click or change on inner elements in radio button (ChoiceGroup) in office-ui-fabric-react. In the below example, I want to click on the link but am not able to. As per my understanding, we can display the JSX element inside onRenderField of the option (of type IChoiceGroupOption). I am able to render correctly but not able to perform any action on that. Do I need to override the click of the radio button? How?

const {
    ChoiceGroup,
    IChoiceGroupOption,
    mergeStyles,
    Fabric
} = window.Fabric;


const ChoiceGroupCustomExample: React.FunctionComponent = () => {
    return (
        <ChoiceGroup defaultSelectedKey="B" options={options} label="Pick one" />
    );
};

const optionRootClass = mergeStyles({
    display: "flex",
    flexDirection: "column",
    alignItems: "baseline"
});


const options: IChoiceGroupOption[] = [
    {
        key: "A",
        text: "Option A",
        ariaLabel:
          "Mark displayed items as read after - Press tab for further action",
        onRenderField: (props, render) => {
            return (
                <div className={optionRootClass}>
                    {render!(props)}
                    <a
                        href="#"
                        onClick={() => console.log("SSSSSSSSSSSS")}
                        style={{ marginLeft: "25px" }}
                    >
                        SHUBHAW KUMAR
                    </a>
                </div>
            );
        }
    },
    { key: "B", text: "Option B" },
    { key: "C", text: "Option C", disabled: true },
    { key: "D", text: "Option D" }
];

const ChoiceGroupCustomExampleWrapper = () => (
    <Fabric>
        <ChoiceGroupCustomExample />
    </Fabric>
);

ReactDOM.render(
    <ChoiceGroupCustomExampleWrapper />,
    document.getElementById("content")
);

<script src="//unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"></script>
<script src="//unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>
<div id="content"></div>

You can find the code on this codepen.

Answer 1

you can just set the z-index of the link to a high value so that it's on top of the input element

<a
  href="#"
  onClick={() => console.log("SSSSSSSSSSSS")}
  style={{ marginLeft: "25px", zIndex: 100000 }}
>
  SHUBHAW KUMAR
</a>

Answer 2

You could add this CSS:

input.ms-ChoiceField-input {
    height: fit-content;
}

to shrink the clickable area the radio option (so it doesn't prevent you from clicking the link).