Dropdown shows twice if controlled component after select

[Noitidart]

If we make the component a controlled component, by including value in the state, when we pick a value, it shows the dropdown twice.

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { AutoCompleteTextView } from 'autocompletetextview'

export default class App extends Component {
    state = {
        value: ''
    }

    suggestions = ['Bangalore', 'Pune', 'Delhi', 'Goa']

    render() {
        return (
            <View style={styles.container}>
                <AutoCompleteTextView
                    style={styles.inputView}
                    dataSource={this.suggestions}
                    onTextChange={this.handleTextChange}
                    hint="Your Hint"
                    value={this.state.value}
                />
            </View>
        )
    }

    handleTextChange = text => this.setState(() => ({ value:text }))
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    inputView: {
        height: 60,
        width: 200,
        backgroundColor: 'skyblue'
    }
});

Controlled - bad behavior

Uncontrolled - good behavior

Here is unctrolled code (just comment out the value prop). We see here it works fine, the dropdown doesnt show twice on select: