I want to insert data from the database to QuillJS, but I can't get it to work, I have tried a lot of stuff but is not working. I have tried setContent but is not working, but also besides that I want to listen for change on quillJS and get the data that is Init so I can post to Database.

This is it the code:

import * as style from '../../constants/styles/Notes.module.scss';
import React from 'react';
import { useQuill } from 'react-quilljs';
import '../../constants/styles/Quill.scss';
import { useEffect, useState } from 'react';

export default function View({ note }) {
  const [isSaving, setIsSaving] = useState(false);
  const { quillRef } = useQuill({
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        [{ align: [] }],

        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ indent: '-1' }, { indent: '+1' }],

        [{ size: ['small', false, 'large', 'huge'] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ['link', 'image', 'video'],
        [{ color: [] }, { background: [] }],

        ['clean'],
      ],
    },
    formats: [
      'bold',
      'italic',
      'underline',
      'strike',
      'align',
      'list',
      'indent',
      'size',
      'header',
      'link',
      'image',
      'video',
      'color',
      'background',
      'clean',
    ],
  });

  return (
    <section className={style.view}>
      <div style={{ width: '100%', height: '100%', border: '0 !important' }}>
        {isSaving === true ? (
          <div className={style.saving}>Saving the new changes.</div>
        ) : null}
        <div ref={quillRef} />
        <div id='toolbar'>
          <button className='ql-bold' />
          <button className='ql-script' value='sub' />
          <button className='ql-script' value='super' />
        </div>
        <div id='editor' />
      </div>
    </section>
  );
}