I am using the MUI Autocomplete. And here is the code am sending a JSX Element[] with radio buttons.

Tryout.JSX

const [selectedValue, setSelectedValue] = React.useState('a');
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSelectedValue(event.target.value);
 };

<AutoCompleteSelect
    optionsData={[
      {
        text: 'Last month',
        element: (
          <div>
            {' '}
            <Radio
              checked={selectedValue === 'a'}
              testid="testRadioWrapper"
              value={'a'}
              onChange={(event) => handleChange(event)}
            />
            a
          </div>
        ),
      },
      {
        text: 'Last 10 month',
        element: (
          <div>
            {' '}
            <Radio
              checked={selectedValue === 'b'}
              testid="testRadioWrapper"
              value={'b'}
              onChange={(event) => handleChange(event)}
            />
            b
          </div>
        ),
      },
    ]}
  />

Receiving optionsData props to Autocomplete.jsx file.

Autocomplete.JSX

 <Autocomplete
      disablePortal
      id="single-select"
      options={optionsData}
      data-testid={testid}
      getOptionLabel={(option) => option.text}
      open={true}
      autoHighlight={false}
      disableClearable
      renderOption={(props, option, { selected }) =>
      <MenuItem {...props}>{option.element}</MenuItem>  
      }
      popupIcon={
        showList ? (
          <i
            className="icon-UpAlternative"
            aria-hidden="true"
            style={{
              fontSize: 11,
              color: Skin.colors.blackLight.value,
            }}
          ></i>
        ) : (
          <i
            className="icon-DownAlternative"
            aria-hidden="true"
            style={{
              fontSize: 11,
              color: Skin.colors.blackLight.value,
            }}
          ></i>
        )
      }
      renderInput={(params) => (
        <TextField
          {...params}
          label=""
          placeholder=""
          data-testid="inputSearchFilter"
        />
      )}
    />

While rendering the options and clicking the radio button inside the list is giving a run time error. enter image description here

Does anyone know why this happens?