Placeholder not visible for empty object as value

When the value parameter is given an empty object, placeholder is not visible. I think, along with null and undefined values, even empty objects {} and empty lists [] should be considered as no value.

For the below code, placeholder is not seen. However, when this.state.value is set as null or undefined, placeholder is visible.

var options = [
    {value: 'apple', label: 'Apple'},
    {value: 'banana', label: 'Banana'}
];

class extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: {}
        }
    }

    render() {
        return (
            <Select
                placeholder="Select a fruit"
                value={this.state.value}
                options={options} />
        );
    }
}

[alynnlp]

My code used React, TypeScript with React-Select Async for controlled value, value needs to be null in order for placeholder to display the text

render() {
     const { id, value } = this.props;
     const currentValue = { label: value };     

 return (
       <SelectList
            placeholder={this.props.placeholder}
            **value={value ? currentValue : null}**
            onChange={this.setQueryValue}
            loadOptions={this.fetchAsyncOption}
            defaultOptions={false}
            inputId={id}
            isClearable={true}
       />

[lugy90]

@tejasjadhav Set value as a void string then convert it to a object.

var options = [
    {value: 'apple', label: 'Apple'},
    {value: 'banana', label: 'Banana'}
];

class extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            value: ''   //   set string
        }
    }

   handleChange(option) {
       let obj ={value: option.value, label: option.label};
       this.setState({value: obj});   //  convert to obj
   }

    render() {
        return (
            <Select
                placeholder="Select a fruit"
                value={this.state.value}
                options={options} 
                onChange={handleChange}/>
        );
    }
}