React select multi value with radius does not center items

Question

When adding a radius to multi select values in React using react-select, the text and remove button do not remain centered within the bubble at certain scales. Zooming in and out of a browser can produce the results,

Aligned text and button

Above the text and remove button are aligned.

Misaligned text and button at different scale

In this scale you can see 'Ocean' has fallen below the remove button.

How can I ensure these are aligned, and centered vertically within the radius of the bubble?

import React from "react";
import { ColourOption, colourOptions } from "./docs/data";
import Select, { StylesConfig } from "react-select";

const colourStyles: 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={colourStyles}
  />
);

I have tried adding div: {'display: 'flex', alignItems: 'center'} within the multiValue styles.