How to implement a chatbot using Dialogflow and React-native with functional component

Question

I am using react native normal workflow (not expo) and also my project is based on functional component type (no class component) so how to implement it. I have used react native gifted chat npm package .. my dilogflow api is working but the messages index are not updating so i am missing some messages

here is my code

import React, { useState, useCallback, useEffect } from 'react'
import { View } from 'react-native'
import { GiftedChat } from 'react-native-gifted-chat'
import { Dialogflow_V2 } from 'react-native-dialogflow';
import { dialogFlowConfig } from '../../config'
import styles from './styles'

export default function chatScreen(props) {

    const dabbaBot = {
        _id: 2,
        name: 'React Native',
        avatar: 'https://placeimg.com/140/140/any',
    }

    let welcomeMessage = {

        _id: 0,
        text: 'Hellooooo....How are you',
        createdAt: new Date(),
        user: dabbaBot

    }

    const [messages, setMessages] = useState([welcomeMessage]);
    const [messagelength, setMessageLength] = useState(0);





    useEffect(() => {
        

        Dialogflow_V2.setConfiguration(
            dialogFlowConfig.client_email,
            dialogFlowConfig.private_key,
            Dialogflow_V2.LANG_ENGLISH_US,
            dialogFlowConfig.project_id
        );

    }, [])

    function sendBotResponse(text) {

        let messageLength = messages.length + 2

        let msg = {
            _id: messageLength + 1,
            text,
            createdAt: new Date(),
            user: dabbaBot
        };


        console.log(msg._id)
        setMessages(messages);
        setMessages(previousMessages => GiftedChat.append(previousMessages, [msg]));


    }

    function handleGoogleResponse(result) {

        let text = result.queryResult.fulfillmentMessages[0].text.text[0];
        sendBotResponse(text);
    }


    const onSend = useCallback((messages = []) => {


        let messageLength = messages.length + 1

        let modifiedMessage = {
            text: messages[0].text,
            user: messages[0].user,
            _id: messageLength + 1,
            createdAt: new Date()
        }

        console.log(modifiedMessage._id)
        // // messages = messages.push(modifiedMessage)
        // // setMessages(messages)
        // setMessages(previousMessages => GiftedChat.append(previousMessages, [modifiedMessage]));

        setMessages(messages);
        setMessages(previousMessages => GiftedChat.append(previousMessages, [modifiedMessage]));


        let message = messages[0].text;
        console.log(message)

        Dialogflow_V2.requestQuery(
            message,
            result => handleGoogleResponse(result),
            error => console.log(error)
        );



    }, [])


    return (

        <View style={styles.maincontainer}>
            <GiftedChat
                messages={messages}
                onSend={messages => onSend(messages)}
                user={{
                    _id: 1
                }}
            />
        </View>
    )
}