How to use the styletron-react.DebugEngine function in styletron-react

renderKeyframes: engineNoop,
    renderFontFace: engineNoop,
};

const App = () => (
    
        
    
);

;

// 
// --------------------------

const debug = new DebugEngine();

const DevApp = () => (
    
        
    
);

;

// useStyletron()
// --------------------------

const [css] = useStyletron();

<div>;
</div>

import React, { Component } from "react";
import { Provider as StyletronProvider, DebugEngine } from "styletron-react";
import { Client as Styletron } from "styletron-engine-atomic";

const debug =
  process.env.NODE_ENV === "production" ? void 0 : new DebugEngine();

// 1. Create a client engine instance
const engine = new Styletron();

import {
  Div,
  StyleReset,
  ThemeProvider,
  Container,
  Icon,
  Button,
  Row,
  Col,
  Input,
  Text,
  Textarea,

/* global document */

import {Client, Server} from 'styletron-engine-atomic';
import {DebugEngine} from 'styletron-react';

export const isServer = typeof window === 'undefined';

const getHydrate = () => document.getElementsByClassName('_styletron_hydrate_');

export const styletron = isServer
  ? new Server()
  : new Client({hydrate: getHydrate()});

export const debug =
  /*eslint-disable*/
  process.env.NODE_ENV === 'production' ? void 0 : new DebugEngine();

import { Client, Server } from 'styletron-engine-atomic'
import { DebugEngine } from 'styletron-react'

const getHydrateClass = () =>
  document.getElementsByClassName('_styletron_hydrate_')

export const styletron =
  typeof window === 'undefined'
    ? new Server()
    : new Client({
        hydrate: getHydrateClass(),
      })

export const debug =
  process.env.NODE_ENV === 'production' ? void 0 : new DebugEngine()

worker.postMessage({
            id: 'init_wasm',
            url: wasmRoute,
          });
          worker.postMessage({
            id: 'set_render_interval',
            interval: 180,
          });
          if ((module: any).hot) {
            (module: any).hot.addStatusHandler(status => {
              if (status === 'dispose') {
                worker.postMessage({id: 'invalidate'});
              }
            });
          }
          debugEngine = new DebugEngine(worker);
        }
        ctx.element = (
          
            {ctx.element}
          
        );
      }

      return next();
    },
  });