Estoy usando reaccionar-seleccionar en un proyecto, y necesito arreglar un grupo en la parte superior independientemente de lo que el usuario esté escribiendo en la entrada;

Para usar la función de grupo en la selección de reacción, utilicé la forma anidada:

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

La entrada tiene estos accesorios:

 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} />

Necesito que cuando el usuario intente escribir algo en la entrada, el primer grupo esté en la parte superior independientemente de lo que el usuario haya escrito en la entrada, y solo el grupo 2 cambie mientras escribe.

¿Podría alguien, por favor, ayudarme a hacer esto?