React-Select aria-label announcing [object object] for options with HTML type labels

I am using react-select@5.4.0 for a dropdown with single-select and non-searchable.

The label I have for each option is in HTML format you can take it as a span which includes
for some formatting purpose.

What I have tried? I have tried to customise my option component to explicitly pass string version for my aria-label.

But when I try running screen reader it reads it as [option option] selected and similar for other options when I use down key arrow to access other options.

Following is my code for the Select Component, Option Component and Dummy options array.

<Select
    components={ { Option: formatOptionLabel } }
    defaultValue={ options[0] }
    isClearable={ false }
    isSearchable={ false }
    options={ options }
  />
 const formatOptionLabel = ({ ...props }) => {
    const innerProps = { ...props.innerProps,
        role: 'option',
        'aria-label': props.data.labelString,
        'aria-live': 'polite'
    };
    return (
        <components.Option
            { ...props }
            innerProps={ innerProps }
        />
    );
};
 const options = [
{value:'a', label: '<span dangerouslySetInnerHTML={{ __html: "option 1 <br /> option1" }} />', labelString: 'option 1 this is option1'}, 
{value:'b', label: '<span dangerouslySetInnerHTML={{ __html: "option 2 <br /> option2" }} />', labelString: 'option 2 this is option2'},
{value:'c', label: '<span dangerouslySetInnerHTML={{ __html: "option 3 <br /> option3" }} />', labelString: 'option 3 this is option3'}];