How to change ValueContainer of react-select so that minifying does not introduce strange behaviour?

Question

I have modified a multi react-select component with ValueContainer so that if several options are selected there is only one option shown and in parenthesis the number of additionally selected options. The code looks like this:

        ValueContainer = ({ children, getValue, ...props }) => {
            let values = getValue();
            let valueLabel = "";

            if (values.length > 0) valueLabel += props.selectProps.getOptionLabel(values[0]);
            if (values.length > 1) valueLabel += ` (${values.length})`;

            // Keep standard placeholder and input from react-select
            let childrenToRender = React.Children.toArray(children).filter((child) => ['Input', 'DummyInput', 'Placeholder'].indexOf(child.type.name) >= 0);

            return (
            <components.ValueContainer {...props}>
                {!props.selectProps.inputValue && valueLabel }
                { childrenToRender }
            </components.ValueContainer>
            );
        };


        customStyles = {
            valueContainer: (provided, state) => ({
              ...provided,
              textOverflow: "ellipsis",
              //maxWidth: "90%",
              //whiteSpace: "nowrap",
              overflow: "hidden",
              display: "initial"
            })
        };

//inside render()
            const employeeFilter = (
                                    <div className="multi-select col-6 col-md-3 filter-element btn">
                                        <span className="filter-label">Filter by employee(s)</span>
                                        <Select
                                            options={this.props.employeeProps.employeeData}
                                            onChange={this.handleEmployeeChange}
                                            value={selectedEmployee}
                                            isMulti={true}
                                            inputId='clickableInput'
                                            components={{
                                                ValueContainer
                                            }}
                                            closeMenuOnSelect={false}
                                            hideSelectedOptions={false}
                                            styles={customStyles}
                                            isSearchable={false}
                                        />
                                    </div>
            );

ValueContainer and customStyles are defined before the React Component and it works fine on my development machine. However, on production it does not work properly:

• clicking outside of the dropdown does not close it (as on the dev machine)
• the placeholder text is barely visible (the area has very little height)

The reason for this seems to be the minification process. I am using TerserPlugin within webpack. Using UglifyJS is not an option since I am writing ES6 code (recommendation here: Why would Webpack 4 minification prevent styles for react-select component?)

I tried everything within this thread https://github.com/JedWatson/react-select/issues/2597 but couldn't get it to work. Might be my lack of understanding of how the components system in react-select works (I took the code from an example).

Thanks for providing any help!