Select not working as intended.

[lively-ops]

I was creating a year selector using @synerise/ds-select or Select. However, I encountered a few issues:

1. No hover effect on items (Options)
2. Items are not clickable.
3. When clicking somewhere else, dropdown is not closing automatically.

---

Note: I am able to select items using arrow keys on keyboard with return key pressed.

here's the code:

` import * as React from "react"; import Icon from "@synerise/ds-icon"; import {AngleDownS, SearchM} from "@synerise/ds-icon/dist/icons"; import theme from "@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme"; import Button from "@synerise/ds-button"; import Select from "@synerise/ds-select"; import {data} from "./mock";

const {Option} = Select;

export const YearSelector = (props) => { const [selected, setSelected] = React.useState('2077-2078')

const handleClear = () => {
   setSelected(null);
   alert('Default Year will be loaded.');
   setDefault();
}

const handleChange = item => {

   setSelected(item)
}

const setDefault = () => {
setSelected('2077-2078')

}

return(
    <div style={{width: 200}}>
        <Select

            autoFocus={true}
            showSearch={true}
            label={'Year'}
            tooltip={'Select Year'}
            value={selected}
            filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
            onChange={(item) => handleChange(item)}
            children={data.map(item => {
                return (
                    <Option value={item}>{item}</Option>
                )
            })}
            >

        </Select>
    </div>
)

} `

mock.js ---> export const data = ['2076-2077', '2077-2078', '2078-2079'];

I have also attached a video as reference. I would appreciate the help if this isn't an issue with the component ds-select.

https://user-images.githubusercontent.com/74601111/126902879-090ec26e-8ed2-47ab-b087-84813506f7de.mp4