My ReactQuill problem

----------------------

DOCUMENT COMPONENT FILE:

----------------------


export default component$((props : props) => {

  var sourceDocData = props.sourceDocData;

  console.log("Parent component") //Gets fired only once when opening Document Component

  const saveNoteOnType = $((fullText : string) => {

    ...
  });


  return (
    <>
      <div style="display: block; position:relative; height: 100%">
        <div style={"width: fit-content; display: block; position: absolute; right: 16px; top: 4px; z-index: 5"}>
          
        </div>
        <div id="paperView" style="display:block; height: 100%; width: 100%;  overflow:hidden;">
          { true && // <-- Just for example to show this is not the problem. Is usually "sourceDocData.data.data &&""
            <DocEditor 
              key={sourceDocData.data.data[Col_RowID]} 
              value={ sourceDocData.data.data && sourceDocData.data.data[Col_RowData][Col_Desc] ? sourceDocData.data.data[Col_RowData][Col_Desc] : "" } 
              updateVals={ $((vals : string) => { saveNoteOnType(vals); }) }
            /> 
          }
        </div>
      </div>
    </>
  );
});




----------------------

DOCUMENT EDITOR FILE:

----------------------


/** @jsxImportSource react */
import { qwikify$ } from '@builder.io/qwik-react';
import "./document-editor.css";
import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';

let RQuill: any;

const importReactQuill = (setShow: Dispatch<SetStateAction<boolean>>) => {
    import('react-quill').then((module) => {
        RQuill = module.default;
        setShow(true);
    });
};

interface props {
  value: string
  updateVals: Function
}

export const Editor = (props: props) => {

    const oldVals = props.value;

    console.log("1: " + oldVals) // Returns <h1>Tes fdhsajf dsjf</h1><p><br></p><p>DJ ksajdk</p><p><br></p><p>daskld</p>
                                 // Also, this always fires twice when opening Document Component

    const [value, setValue] = useState(oldVals);
    const [show, setShow] = useState(false);
    

    useEffect(() => {
        importReactQuill(setShow);
    }, []);


    return show ? (
        <RQuill theme='snow' value={value} onChange={(content : string, delta : any, source : any, editor : any) => { 

            console.log("2: " + oldVals) // Returns <h1>Tes fdhsajf dsjf</h1><p><br></p><p>DJ ksajdk</p><p><br></p><p>daskld</p>

            setValue(editor.getContents());
            props.updateVals(editor.getHTML());

            console.log("3: " + editor.getHTML()); // Returns <p>Tes fdhsajf dsjf</p><br><p>DJ ksajdk</p><br><p>daskld</p> on component initialization ONLY when navigating from SourceView component to Document component.
          }} 
          modules={{
            ...
          }} 
          formats={[
            ...
          ]}/>
    ) : (
        <div>Loading...</div>
    );
};


 
// Convert React component to Qwik component

export const DocEditor = qwikify$(Editor)