Version: 0.7.23
Consider following code:

 render() {
 return (
 <Fragment>
 {
 this.state.initialized && (
 <Widget
 ref={ el => this.addListeners(el) }
 {...this.props}
 customComponent={ev => this.renderCustomComponent(ev)}
 />
 )
 }
 </Fragment>
 );
 }
 private renderCustomComponent(msg: any) {
 const dangerousHtml = {
 __html: msg.custom.htmlContent
 };
 return (
 <div className="response">
 <div className="message-text">
 <div className="markdown" dangerouslySetInnerHTML={ dangerousHtml }></div>
 </div>
 </div>
 );
 }

Message payload looks like this:

{
 custom: {
 htmlContent: "<button>some button</button>"
 }
}

When I get this message live from rasa, custom component renders it properly. If I do a page refresh, it will try to render history and I get an error in console that msg.custom is undefined. Upon debugging source code found out that message props are not passed in correctly in custom component. This is the message I get, there is no key named custom at all, but it's there, it's just not properly passed as prop. (See _root prop and it's entries)
image

I think the way props are passed is just wrong because ...message.get('props') returns another immutable instance, not a proper json we need. I think it might be that when the message is live, it's not an immutable instance but a simple json and that's why it's working.

I would really appreciate some input on this
Thanks