Why cant I select all selected option in IComboBox from @fluentui/react

Question

I am no pro at java scrip. But for some reason I absolutely cannot select a property and it return everything that was in the array it selected from. It is really weird behavior...

In the below on change event, I am attempting to capture all the selected items from the ComboBox to wright back to my prop. If you look in the console.log(selectedOptions); log it will show every option that is selected. Perfect and it's what I need. but when I call the console.log(selecteditems); array itself everything will return but the option that triggered the on change...

  private _onChange = () => {
    if (this._comboBox.current) {
      const selectedOptions = this._comboBox.current;
      const selecteditems = selectedOptions.selectedOptions
      console.log(selectedOptions);
      console.log(selecteditems);
      
    }
  }

Below is the full file. It is not complete as I'm just trying to get it to a working state. Data is coming from a local json-server for testing.

import * as React from 'react';
import {
  ComboBox,
  IComboBox,
  IComboBoxOption,
  IComboBoxStyles,
  IDropdown,
  SelectableOptionMenuItemType,
  getAllSelectedOptions
} from '@fluentui/react';

export interface MultiSelectOptionProps {
  name: string;
  updateValue: (value: string) => void;
}

interface MultiSelectOptionState  {
  options: IComboBoxOption[];
  selectedOptions: IComboBoxOption[];
}

export class MultiSelectOption extends React.Component<MultiSelectOptionProps, MultiSelectOptionState> {

  private _comboBox = React.createRef<IComboBox>();

  constructor(props: MultiSelectOptionProps) {
    super(props);
    this.state = {
      options: [],
      selectedOptions: []
    };
  }

  public componentDidMount() {
    this.fetchOptions();
  }

  /**
   * Fetches options from the "account" entity using the web API.
   * Populates the component state with the retrieved options.
   */
  private fetchOptions = async () => {
    try {
      const response = await fetch('http://localhost:3000/value');
      const data = await response.json();
      const options = data.map((item: any) => ({
        key: item.stars_complianceriskassessmentid,
        text: item.stars_complianceriskassessment
      }));
      this.setState({ options });
    } catch (error) {
      console.error('Error fetching options:', error);
    }
  };
  
  /**
   * Renders the component.
   * @returns The rendered React node.
   */
  public render(): React.ReactNode {
    return (
      <div>
      {this.state.options.length > 0 ? (
      <ComboBox
        componentRef={this._comboBox}
        onChange={this._onChange}
        multiSelect
        defaultSelectedKey={this.props.name.split(',')}
        placeholder="---"
        autoComplete="on"
        options={this.state.options}
      /> //end of ComboBox
      ) : (
      <div>Loading...</div>
      )}
      </div>
    );
  }

  private _onChange = () => {
    if (this._comboBox.current) {
      const selectedOptions = this._comboBox.current;
      const selecteditems = selectedOptions.selectedOptions
      console.log(selectedOptions);
      console.log(selecteditems);
      
    }
  }
  
  
}

Things I have tried.

      <ComboBox
        //componentRef={this._comboBox}
        onChange={(_event: React.FormEvent<IComboBox>, option?: IComboBoxOption, _index?: number, value?: string) => {
          const selectedOptions = getAllSelectedOptions(this._comboBox.current, []); 
          const selectedOptionKeys = selectedOptions.map((option) => option.key).join(',');
          this.props.updateValue(selectedOptionKeys);
          }
        }