React Trix Color is removed when feeding data to input

Question

    <input type="hidden" id="trix-input" 
           value="<div>abc <span style=&quot;color:red;&quot;>123</span></div>"
    />

        <trix-editor input="trix-input"></trix-editor>

I expect the code above to print abc 123(red color), however the value is stripped from its CSS styles.

The code above works on an HTML page, however when I put it on a react component CSS styles get removed.

I'd appreciate any help.

Thanks

Update:

React Component - CSS gets stripped

               <trix-editor
                    style={{ minHeight: 300 }}
                    input={"trix" + this.props.index}
                    ref={this.trixInput}
                />

                <input
                    type="hidden"
                    id={"trix" + this.props.index}
                    value={this.props.journals.article.paragraphs[this.props.index].paragraph}
                    className={classnames('', { 'is-invalid': errors.paragraph })}
                />

Answer 1

For anyone having the same issue using react, do the following after importing React and Trix:

import React, { Component } from 'react'
import Trix from "trix";

Trix.config.attachments.preview.caption.name = false //remove caption
Trix.config.attachments.preview.caption.size = false //remove caption size 
Trix.config.textAttributes.textColour = {
    styleProperty: "color",
    inheritable: true,

} //set config for custom colors