Extract custom CSSProperties in react-select style

I want to customly style my react-select component.

Currently I have defined my styles like the following and this works fine:

const customStyles: StylesConfig<any, false> = {
            control: (provided, _) => ({
                ...provided,
                borderColor: '#0682A8',
                color: '#000',
                borderRadius: 21
            }),
            input: (provided, _) => ({
                ...provided,
                ':before': {
                    content: `"${properties.label}:"`,
                    textTransform: 'uppercase',
                    display: 'inline-block',
                    fontWeight: 'bold',
                    marginRight: 5
                }
            }),
            singleValue: (provided, _) => ({
                ...provided,
                ':before': {
                    content: `"${properties.label}:"`,
                    textTransform: 'uppercase',
                    display: 'inline-block',
                    fontWeight: 'bold',
                    marginRight: 5
                }
            }),
            placeholder: (provided, _) => ({
                ...provided,
                ':before': {
                    content: `"${properties.label}:"`,
                    textTransform: 'uppercase',
                    display: 'inline-block',
                    fontWeight: 'bold',
                    marginRight: 5
                }
            })
        };

As there is quite some code duplication, I would like to extract the definition of the before pseudo element. I tried to do so like this:

const beforeStyles = {
    content: `"${properties.label}:"`,
    textTransform: 'uppercase',
    display: 'inline-block',
    fontWeight: 'bold',
    marginRight: 5
};

const customStyles: StylesConfig<any, false> = {
    control: (provided, _) => ({
       ...provided,
       borderColor: '#0682A8',
       color: '#000',
       borderRadius: 21
    }),
    input: (provided, _) => ({
       ...provided,
       ':before': beforeStyles 
    }),
    singleValue: (provided, _) => ({
       ...provided,
       ':before': beforeStyles 
    }),
    placeholder: (provided, _) => ({
       ...provided,
       ':before': beforeStyles 
    })
}

This leads to the following error:

ERROR in [at-loader] ./src/components/single-select/SingleSelect.tsx:44:13 
    TS2322: Type '(provided: CSSObject, _: InputProps) => { ':focus::before': { content: string; textTransform: string; display: string; fontWeight: string; marginRight: number; }; alignContent?: AlignContent | ... 2 more ... | undefined; ... 904 more ...; ":visited"?: CSSObject | undefined; }' is not assignable to type '(base: CSSObject, props: InputProps) => CSSObject'.
  Type '{ ':focus::before': { content: string; textTransform: string; display: string; fontWeight: string; marginRight: number; }; alignContent?: Property.AlignContent | (Property.AlignContent | undefined)[] | Property.AlignContent[] | undefined; ... 904 more ...; ":visited"?: CSSObject | undefined; }' is not assignable to type 'CSSObject'.
    Property '':focus::before'' is incompatible with index signature.
      Type '{ content: string; textTransform: string; display: string; fontWeight: string; marginRight: number; }' is not assignable to type 'CSSInterpolation'.
        Type '{ content: string; textTransform: string; display: string; fontWeight: string; marginRight: number; }' is not assignable to type 'CSSObject'.

I can neither import or use CSSObject nor CSSInterpolation because I can not find where they should be imported from. (My autocompletion doesn't suggest anything either)

const beforeStyles: CSSInterpolation = {
    content: `"${properties.label}:"`,
    textTransform: 'uppercase',
    display: 'inline-block',
    fontWeight: 'bold',
     marginRight: 5
};

The only thing I could find, were CSSProperties but when I use them like this:

const beforeStyles: CSSProperties= {
    content: `"${properties.label}:"`,
    textTransform: 'uppercase',
    display: 'inline-block',
    fontWeight: 'bold',
     marginRight: 5
};

I get the error, stating that CSSProperties can not be cast to CSSObject.

I can import the CSSProperties class from react but no import statement is suggested if I want to create something as an CSSObject.

What am I doing wrong? How can I extract parts of my styles?

------- Update after suggestion from an answer

I tried to import CSSObject from @emotion/serialize, but got an error than that CSSObject is a namespace and must not be used as a type.

ERROR in [at-loader] ./src/components/single-select/SingleSelect.tsx:28:29 TS2709: Cannot use namespace 'CSSObject' as a type.