Wysiwyg Trix Editor React JSX

App.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import {
    AppProvider,
    Page,
    Card,
    Layout,
} from "@shopify/polaris";
import Wysiwyg from "./components/wysiwyg";

export default class App extends React.Component {
  
  state = {
    content: ""
  }
    
  render(){
    return(
      <AppProvider apiKey={apiKey} shopOrigin={shopOrigin} forceRedirect={true}>
        <Page>
          <Layout>
            <Card>
                <Wysiwyg />
            </Card>
          </Layout>
         </Page>
      </AppProvider>
    );
  }
}

wysiwyg.jsx

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

class Wysiwyg extends React.Component {

    render() {
        return (
            <div>
                <input
                    type="hidden"
                    id="trix"
                />
                <trix-editor input="trix" />
            </div>
        );
    }
}

export default Wysiwyg;