I'm trying to change state on the web page outside the webchat component but not able to do it.

import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
import ReactWebChat, { createDirectLine, createStore, createStoreWithDevTools, createStyleSet, 
createCognitiveServicesSpeechServicesPonyfillFactory, createBrowserWebSpeechPonyfillFactory } 
from 'botframework-webchat';
import { GrClose } from "react-icons/gr"

const ChatbotContent = (props) => {

 const store =
    createStore({}, ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
        
        }
        else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
            console.log(action.type)
            const { activity } = action.payload;
            console.log(activity)

            if (activity.type === 'message') {
                if (activity.replyToId) {
                    //alert(JSON.stringify(activity, null, 2));
                    console.log("hola")     
                    setcheck(true)
                    props.avatarchange()
                }
            }
        }
        return next(action);
    })


const [check, setcheck] = useState(false)

const styleOptions = {
    bubbleBackground: '#FFFFFF',
    bubbleFromUserBackground: '#4C12A1',

    hideUploadButton: true,
    sendBoxBackground: "transparent"

};



const directLine = useMemo(() => createDirectLine({ token: '' }), []);
const speech = useMemo(() => createBrowserWebSpeechPonyfillFactory(), []);
return (

    <div style={{ height: "100%", width: "100%" }}>
        <div style={{ float: "right" }}>
            <GrClose onClick={props.chatchange} />
        </div>
        <ReactWebChat directLine={directLine} userID="YOUR_USER_ID" store={store} styleOptions={styleOptions} webSpeechPonyfillFactory={speech} />
        
    </div>

)
 }

export default ChatbotContent

the console log is working but the following statechange and to trigger the function from props are not working

   if (activity.type === 'message') {
                if (activity.replyToId) {
                   
                    console.log("hola")
      
                    setcheck(true)
                    props.avatarchange()
                }

How can we change state within the store based on events in webchat ?