Flat List not Rendering data on React Native

I want to showing data Report Book From API. But the result is nothing like in this picture

and this is before showing data base on date

and here is the code of reportbooksummary.js

class ReportBookSummary extends Component {

    constructor() {

        super();

        this.state = {

            isLoading: true,
            id_book: '',
            startdate: '',
            enddate: '',
            data: []
        };
    }
    componentDidMount() {
        this.fetchdata();
    }

    fetchdata = async () => {
        let id_book = this.props.navigation.state.params.id_book;
        let TanggalStart = this.props.navigation.state.params.TanggalStart;
        let TanggalEnd = this.props.navigation.state.params.TanggalEnd;
        const response = await fetch('http://192.168.0.21/library-api/reportbook.php?id_book=' + id_book + '&TanggalStart=' + TanggalStart + '&TanggalEnd=' + TanggalEnd);
        const responseJson = await response.json();
        this.setState({ data: responseJson });
    };


    _renderItem = ({ item }) => (
        <View style={{
            backgroundColor: '#228B22', margin: 15, justifyContent: 'center', borderTopRightRadius: 40,
            borderTopLeftRadius: 40, borderBottomEndRadius: 40, borderBottomLeftRadius: 40
        }}>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> ID Book:    {item.id_book}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> Book Name:  {item.book_name}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> Author:   {item.author}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> Description:  {item.description}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> Book Price: {item.book_price}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> ID Publication: {item.id_publication}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> ID Branch: {item.id_branch}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> Qty: {item.qty}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> Rental Qty: {item.rental_qty}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> Image Name: {item.imagename}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> Image Path: {item.imagepath}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
            <Text style={{ fontSize: 15, margin: 15, justifyContent: 'center', color: 'white' }}> Entry Date: {item.entry_date}</Text>
            <Text style={{ height: 2, backgroundColor: 'white' }}></Text>
        </View>
    );

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.headerTxt}>Report Book</Text>
                <View style={styles.subView}>
                    <Text style={styles.subTxt}>List Report Book</Text>


                    <FlatList
                        data={this.state.data}
                        renderItem={this._renderItem}
                        keyExtractor={(item, index) => index}
                    />
                    <TouchableOpacity style={styles.btn} onPress={() => this.props.navigation.navigate('ReportBook')}>
                        <Text style={styles.btnTxt}>Go Back to Report Book</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}



const styles = StyleSheet.create({
    MainContainer: {

        alignItems: 'center',
        flex: 1,
        paddingTop: 30,
        backgroundColor: '#fff'

    },

    container: {
        backgroundColor: '#228B22',
        height: 700,
    },
    subView: {
        backgroundColor: 'white',
        height: 399,
        marginTop: 240,
        borderTopRightRadius: 40,
        borderTopLeftRadius: 40,
    },
    headerTxt: {
        fontSize: 20,
        marginLeft: 20,
        fontWeight: 'bold',
        color: 'white',
        position: 'absolute',
        marginTop: 140,
    },
    subTxt: {
        color: 'black',
        marginTop: 20,
        fontSize: 30,
        fontWeight: 'bold',
        marginLeft: 40,
    },
    nameInput: {
        height: 40,
        width: 270,
        marginLeft: 40,
        borderBottomWidth: 1,
        marginTop: 30,
    },
    btn: {
        height: 50,
        width: 200,
        backgroundColor: '#228B22',
        borderRadius: 80,
        marginLeft: 70,
        marginTop: 30,
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnTxt: {
        color: 'white',
        fontWeight: 'bold',
        fontSize: 20,
    },
    endView: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    endTxt: {
        fontSize: 15,
        marginTop: 30,
        marginLeft: 60,
        fontWeight: 'bold',
    },
    endBtn: {
        marginLeft: 50,
        justifyContent: 'space-between',
    },
    loginTxt: {
        fontSize: 15,
        fontWeight: 'bold',
        marginTop: 24,
    },
});

export default ReportBookSummary;

Is something wrong about my js code? i thought this one should be working properly