I am using react-select on a project, and I need to fix a group on top independently of what the user is typing on the input;

To use the group feature on the react-select I used the nested way:

const options = [
  {
   label: 'example 1',
   values: group1
  },
  {
   label: 'example 2',
   values: group2
  },
]

The input has this props:

const formatGroupLabel = data => (
  <S.GroupStyles>
    {data.label && <S.GroupBadgeStyles> </S.GroupBadgeStyles>}
  </S.GroupStyles>
)

<S.DropDown
   formatGroupLabel={formatGroupLabel}
   isDisabled={disabled}
   name={input.name}
   noOptionsMessage={() => <div>Nenhum resultado</div>}
   onBlur={input.onBlur}
   onChange={option => {
     input.onChange(option.value)
   }}
   options={options}
   placeholder={placeholder}
   styles={setReactSelectStyles}
   value={value}
   />

I need that when the user try to type anything on the input, the first group be ever on top independently of what the user has typed on input, and only group 2 changes while typing.

Could anyone, please, help me to do this?