How can I enforce multi-select value label and remove button are aligned vertically?

[ColeHanlon]

When using mutli-select, the values can become misaligned with the label and remove button. The label also becomes misaligned within the multi-select value itself. This seems to be more of an issue when using a border radius. But can also be seen without. Misalignment also changes with the scale of the window.

Aligned

Misaligned

You can see the bottom two examples end up with the label more towards the bottom.

const selectStyles: StylesConfig<ColourOption, true> = {
  control: (styles) => ({
    ...styles,
    fontSize: 17,
  }),
  multiValue: (styles, { data }) => {
    return {
      ...styles,
      borderRadius: 27,
      border: "1px black !important",
    };
  },
};

export default () => (
  <Select
    closeMenuOnSelect={false}
    defaultValue={[colourOptions[0], colourOptions[1]]}
    isMulti
    options={colourOptions}
    styles={selectStyles}
  />
);