Using react-select we have some options that have a callback and when clicked open a separate modal. We've created a custom MultiValueLabel which has a callback to the onedit

MultiValueLabel: props => {
    const { classes } = props.selectProps as unknown as CustomSelectProps;
    const item = props.data as InternalCustomSelectItem;
    return (
        <div {...props.innerProps} onClick={item.onEdit} title={item.title ?? item.name}>
            {item.icon && <div className={classes.valueIcon}>{item.icon}</div>}
            {item.name}
        </div>
    );
},

The callback looks something like this:

    onEdit: async (groupKey: string) => {
        const groupForEdit = (await groupForEdit(groupKey)).value;
        return dispatch(ModalActions.showModal(CommonModalTypes.filterModal, { editingGroup: groupForEdit }));
    },

I would like to stop the other options from appearing when clicking these objects because showing the modal AND the dropdowns is a lot going on when really the modal is the only thing actionable.

I've tried a few variations of e.stopPropagation(); or e.preventDefault(); but none of them seem to stop the options from appearing. Anyone done something similar?