I want to return the value of react-quill submitted value to backend
What I want out of the value should look like this

<p><span style="font-size:2.5rem">THE VALUE</span></p>

but what I get is

<p><span class="ql-size-huge">THE VALUE</span></p>

Not only for headers but also aligns and stuff

So how do I convert class into Inline Styles using react-quill?

Here is my code

import { Button } from "app/components/buttons";
import juice from "juice";
import { useRef } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import { useDispatch, useSelector } from "react-redux";



// Define custom icons
const customIcons = {
  codeBlock: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="ql-stroke" stroke="currentColor">
      <path fill-rule="evenodd" d="M3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm14.25 6a.75.75 0 0 1-.22.53l-2.25 2.25a.75.75 0 1 1-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 1 1 1.06-1.06l2.25 2.25c.141.14.22.331.22.53Zm-10.28-.53a.75.75 0 0 0 0 1.06l2.25 2.25a.75.75 0 1 0 1.06-1.06L8.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-2.25 2.25Z" clip-rule="evenodd"/>
    </svg>
  `,
};

// Register the custom icon with Quill
const icons = ReactQuill.Quill.import("ui/icons");
icons["code-block"] = customIcons.codeBlock;

const modules = {
  toolbar: {
    container: [
      [{ header: "1" }, { header: "2" }],
      [{ size: [] }, { font: [] }],
      [
        "bold",
        "italic",
        "underline",
        "strike",
        "blockquote",
        "link",
        "code",
        "code-block",
      ],
      [
        { align: [] },
        { list: "ordered" },
        { list: "bullet" },
        { indent: "-1" },
        { indent: "+1" },
      ],
      ["image"],
      [{ color: [] }, { background: [] }],
      ["clean"],
    ],
    handlers: {
      "code-block": function () {
        this.quill.format("code-block", !this.quill.getFormat()["code-block"]);
      },
    },
  },
};

const formats = [
  "header",
  "font",
  "size",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "list",
  "bullet",
  "indent",
  "link",
  "image",
  "align",
  "color",
  "background",
  "code",
  "code-block",
];

const RichTextEditor = () => {
  const dispatch = useDispatch();
  const setValue = (value: string) => {
  console.log(value)
  };
  const quillRef = useRef(null);

  const sendEmail = () => {

   };

  return (
    <div>
      <ReactQuill
        ref={quillRef}
        value={mdValue}
        onChange={setValue}
        modules={modules}
        formats={formats}
      />
      <div>
        <Button onClick={sendEmail}>Send</Button>
      </div>
    </div>
  );
};

export default RichTextEditor;