How to hide send box in React Web chat Bot framework

I am working on an application where I would like to hide "Send Box" and display only messages coming from the Bot. I tried the below code, but somehow this did not work. Can anyone help me here.

My react version is 18.2.0 and botframework-webchat version is ^4.15.7

<ReactWebChat
  attachmentMiddleware={attachmentMiddleware}
  directLine={directLine}
  styleOptions={styleOptions}
  store={store}
/>

const styleOptions = {  
 hideSendBox: true 
};

I attaching a snippet below let me know if this works for you.

import { ReactWebChat } from 'botframework-webchat';

const styleOptions = {
  hideSendBox: true
};

function MyChatComponent() {
  return (
    <ReactWebChat
      styleOptions={styleOptions}
      directLine={directLine}
      userID="YOUR_USER_ID"
      username="YOUR_USERNAME"
      locale="en-US"
    />
  );
}