How to preserve the structure or styles of an HTML template passed to Editor component

[7GBars]

n my project, I am using the PrimeReact Editor component, which is a text editor component based on Quill.

I have an HTML template that I am trying to pass to the Editor component (it comes from the server, but for this example, I will show it locally).

import React, { useEffect, useState } from 'react';
import { Editor, EditorProps, EditorTextChangeEvent } from "primereact/editor";

type THTMLEditorProps = EditorProps;

export const HTMLEditor: React.FC<THTMLEditorProps> = (props) => {

  const test1 = ' <div class="big" style="border: 1px solid red;">border</div>'
  const test2= ' <div class="big" style="font-size: 16px">font</div>'
  const test3 = ' <div class="big" style="color: red">color</div>'
  return (
    <div className={'html-editor-container'}>
      <Editor {...props} value={test1} />
    </div>
  );
}

When I inspect the structure in Chrome DevTools, I notice that no classes are applied (i.e., big will not work), and the div is converted to a p by Quill's internal logic. Inline styles also do not apply (except for color).

How can I avoid this and get the output structure that I passed (with classes and inline styles preserved)?