I have embedded my bot into my react app with the following code:

const Botpress = () => {
  const client = useClient({ clientId });

  return (
    <WebchatProvider
      client={client}
      theme={theme}
      configuration={configuration}
    >
      <style>{style}</style>
      <Container
        style={{
          height: "100vh",
          width: "50%",
          display: "flex",
          justifyContent: "space-between",
        }}
      >
        <Header />
        <MessageList />
        <Composer>
          <ComposerInput />
          <ComposerButton />
        </Composer>
      </Container>
    </WebchatProvider>
  );
};

export default Botpress;

I am trying to send my app a payload from the widget like this

window.botpressWebChat.onEvent(event => {
            if (event.type ==='TRIGGER') {
//do something
        }, ['TRIGGER']);

but I am not sure how to implement this with the react component. I have tried making a tag in the webchat provider but that doesn't work. I have also tried abandoning the bot react component and using window.botpressWebChat.init({}) like in the documentation. But then I haven't been able to style my component effectively Let me know if any clarification needed, any help would be appreciated!