react-select styling issues when resizing for height and width

Question

I am trying to make a react-select component but I keep running into an issue where if I change the high and width of the original react-select it throws everything else of center.

Here is the original react-select box code:

import React from 'react'
import Select from 'react-select'

const options = [
    { value: 'item-1', label: 'item-1' },
    { value: 'item-2', label: 'item-2' },
    { value: 'item-3', label: 'item-3' },
    { value: 'item-4', label: 'item-4' }

]


export default function Example(){
    return (
        <Select options={options}
                closeMenuOnSelect={true}
                placeholder="Placeholder"

        />

    )}

and a picture: original react-select image

this is size of react-select box I want: height: 20, width: 118.5

modified react-select for correct height and width

as you can see it throws off the placement of the input box, placeholder, and icons.

Here is the code for the above image:

import React from 'react'
import Select from 'react-select'

const options = [
    { value: 'item-1', label: 'item-1' },
    { value: 'item-2', label: 'item-2' },
    { value: 'item-3', label: 'item-3' },
    { value: 'item-4', label: 'item-4' }

]


const customStyles = {
    control: base => ({
        ...base,
        height: 20,
        minHeight: 20,
        width: 118.5,
    }),
}


export default function Example(){
    return (
        <Select options={options}
                styles={customStyles}
                closeMenuOnSelect={true}
                placeholder="Placeholder"

        />

    )}

and this is how I have been trying to modify the component. This has gotten me somewhat close to the desired outcome but the input box sizing and icon placements are still off and sized weird:

import React from 'react'
import Select from 'react-select'

const options = [
    { value: 'item-1', label: 'item-1' },
    { value: 'item-2', label: 'item-2' },
    { value: 'item-3', label: 'item-3' },
    { value: 'item-4', label: 'item-4' }

]


const customStyles = {
    control: base => ({
        ...base,
        height: 20,
        minHeight: 20,
        width: 118.5,
    }),
     valueContainer: base => ({
         ...base,
         height: 20,
         minHeight: 20,
         width:20,
         alignItems: 'left',
     }),
     indicatorsContainer: base => ({
         ...base,
         height: 20,
         minHeight: 20,
         alignItems: 'center',
     }),

}


export default function Example(){
    return (
        <Select options={options}
                styles={customStyles}
                closeMenuOnSelect={true}
                placeholder="Placeholder"

        />

    )}

react-select what I have been able to achieve with the posted code image 1 react-select what I have been able to achieve with the posted code image 2

I have been at this for hours and I just cannot seem to get everything to fit nice and neat into the react-select box when I resize it. Any help would be greatly appreciated.