react-select when using styled components

styled-react-select.js

import React, {useContext, useState} from 'react'
import { ThemeContext } from 'styled-components';
import Select from 'react-select'

const styles = {
    control: (provided, { selectProps: { theme, anotherProp } }) => ({
        ...provided,
        background: anotherProp,
        boxShadow: theme.shadow(),
        border: 'none',
        outline: 'none',
        width: '100%',
        fontSize: '1.1em',
        cursor: 'pointer',
        margin: 0,
        transition: theme.defaultTransition(),
        padding: '1em',
        zIndex: 9997,
        borderRadius: theme.borderRadius,
        minWidth: '300px'
    }),
    indicatorSeparator: () => ({
        display: 'none'
    }),
    option: (provided, state) => ({
        ...provided,
        background: 'none',
        color: state.isFocused ? state.selectProps.theme.blue() : state.selectProps.theme.dark(.7),
        padding: '1em',
        transition: state.selectProps.theme.defaultTransition(),
        fontSize: '1em',
        cursor: 'pointer',
        zIndex: 9998,
    }),
    placeholder: (provided, { selectProps: { theme } }) => ({
        ...provided,
        color: theme.dark()
    }),
    dropdownIndicator: (provided, { selectProps: { theme } }) => ({
        ...provided,
        color: theme.blue(),
        padding:'8px 0'
    }),
    valueContainer: provided => ({
        ...provided, paddingLeft:0
    }),
    indicatorsContainer: provided => ({
        ...provided,
        padding:0,
    }),
    menu: (provided, { selectProps: { theme, anotherProp } }) => ({
        ...provided,
        padding: 0,
        border: 'none',
        boxShadow: theme.activeShadow(),
        ouline:'none',
        background: anotherProp,
        borderRadius: theme.borderRadius,
        zIndex: 9999,

    }),
    menuList: provided => ({
        ...provided,
        padding: '1em'
    })
  }

const options = [
    {label: 'option 1', value: 1},
    {label: 'option 2', value: 2},
    {label: 'option 3', value: 3}
]

export default () => {
    const [value, setValue] = useState(null);
    const theme = useContext(ThemeContext);
    return (
        <Select
            anotherProp="white"
            placeholder="This is a select"
            value={value}
            options={options}
            onChange={setValue}
            theme={theme}
            styles={styles}
            isSearchableboolean={false}
            isSearchable={false}
            inputProps={{readOnly:true}}
            blurInputOnSelect={true}
            readonly
            hideSelectedOptions
        />
    )
};