Select Dropdown Can Be Clicked in React

I've got this collapsible thing that you can click to show or hide a dropdown. Right now, that dropdown can only be click on where the radio button is located. What I want is for the whole area to be clickable, so you can choose the dropdown by clicking anywhere there. How can I make that happen?

Codesandbox ----> CLICK HERE

<Collapse in={expanded} timeout="auto" unmountOnExit>
  <Card className="mb-2">
    <CardContent className="p-0">
      <FormControl className="w-100" component="fieldset">
        <RadioGroup value={activeOption} onChange={onSubOptionClicked}>
          {subOptions.map((subOption) => (
            <ListSubOptionItem
              {...subOption}
              activeOption={activeOption}
              key={subOption.label}
            />
          ))}
        </RadioGroup>
      </FormControl>
    </CardContent>
  </Card>
</Collapse>

Update the ListSubOptionItem component to render all the UI/visual content as the input/control's label so it's entirely clickable.

import {
  ...,
  FormControlLabel as BaseFormControlLabel,
  ...,
  styled,
} from "@mui/material";

const StyledListSubOptionLabel = styled(ListItemText)({
  // marginLeft: "32px", <-- Removed
  marginTop: "-4px !important"
});

...

const FormControlLabel = styled(BaseFormControlLabel)({
  alignItems: "baseline", // <-- align checkmark with text
  ".MuiFormControlLabel-label": {
    flexGrow: 1, // <-- so label grows to fill width
  },
});

const ListSubOptionItem = ({
  imgUrl,
  label,
  subLabel,
  maxWidth,
  disabled = false,
  value = null,
  activeOption = null
}) => {
  return (
    <FormControlLabel
      disabled={disabled ?? false}
      className={classNames("m-0 sub-option-item", {
        active: activeOption === value
      })}
      control={<StyledRadio />}
      label={
        <StyledListSubOptionItemWrapper
          className={classNames("d-flex justify-content-between py-3 pr-3", {
            "align-items-start": !!subLabel,
            "align-items-center": !subLabel
          })}
        >
          <Stack>
            {label}
            {subLabel && (
              <StyledListSubOptionLabel
                classes={{ secondary: "text-gray" }}
                secondary={subLabel}
              />
            )}
          </Stack>
          {imgUrl && (
            <img
              src={imgUrl}
              alt={imgUrl}
              {...(subLabel && { className: "mt-1" })}
              style={{
                opacity: disabled ? 0.2 : 1,
                maxWidth: maxWidth ?? "80px",
                width: "100%"
              }}
            />
          )}
        </StyledListSubOptionItemWrapper>
      }
      value={value}
    />
  );
};