выберите опцию со значком, который при нажатии вызовет отдельную функцию и предотвратит ошибку

Question

У меня есть выпадающий список antd , чтобы выбрать пользователей из списка. Мне нужен значок (избранное) с префиксом их имени, чтобы у меня была возможность добавить их в избранное, чтобы они отображались в верхней части списка. Нажатие на имя должно выбрать опцию, а нажатие на иконку должно вызвать API и не должно выбирать эту опцию. Как запретить использование этой функции по умолчанию?

https://imgur.com/sWXjrhm

<Select optionFilterProp='children' value={this.state.selectedUserId}
onSelect={this.handleChangeUser.bind(this)}
className='mb-10 w-100' 
>
    <Option value={'0'} key={'0'}>
        Choose User
    </Option>
    {this.state.userData && this.state.userData.length !== 0                                             
    ? this.state.userData.map(user => (                                                  
      <Option key={user.id.toString()} value={user.id}>                                                      
        <Icon                                                            
            type='star'
            theme={user.isFavorite ? 'filled' : 'outlined'}
            style={{
              margin: '4px 10px 0px 0px',
              color: user.isFavorite ? 'green' : '',
            }}
            onClick={() => this.handleChangeFavoriteUsers(user.id)}
        />
      {user.informal_name}
    </Option>
   ))
   : ''}
</Select>

Обработчик щелчков по значку

public async handleChangeFavoriteUsers(value: string) {
  // Call API to update the User and prevent default
}

Answer 1

Нашел решение, изменив на

onClick={(e) => this.handleChangeFavoriteUsers(user.id, e.stopPropagation())}