ReactJs quill editor add color to text not working for deployed app

I am using quill editor in my react project for editing text. I have deployed the react app on an ubuntu server using Nginx. There is a feature for adding color to text but this feature is not working for the hosted app. It works fine on my local machine. I am not able to figure out the cause of this issue.

Working on my local machine: Screenshot 1

Not working for the hosted app: Screenshot 2

import "react-quill/dist/quill.snow.css";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";

const modules = {
  toolbar: [
    [{ header: "1" }, { header: "2" }, { font: [] }],
    [{ size: [] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [
      {
        color: ["red", "blue", "yellow"],
      },
    ],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" },
    ],
    ["link", "image", "video"],
    ["clean"],
  ],
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  },
};

const formats = [
  "header",
  "font",
  "size",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "list",
  "bullet",
  "indent",
  "link",
  "image",
  "video",
  "color",
];

const QuillNoSSRWrapper = dynamic(import("react-quill"), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

export default function ShowQuill(props) {
  const [description, setDescription] = useState("");
  const [editMode, setEditMode] = useState(false);

  useEffect(() => {
    setDescription(props.description);
  }, [props]);

  const onDescSave = () => {
    setEditMode((prevState) => !prevState);
    if (props.type === "carer_support") {
      if (editMode) {
        props.onDescriptionSave(props.index, description);
      }
    } else if (props.type === "carer_story") {
      if (editMode) {
        props.onDescriptionSave(
          props.carer_story_index,
          props.index,
          description
        );
      }
    } else if (props.type === "gcsp") {
      if (editMode) {
        props.onDescriptionSave(props.index, description);
      }

    }
    else if (props.type === "behaviour") {
      if (editMode) {
        props.onDescriptionSave(description, props.wh_section_index, props.behaviour_index, props.sub_section_index, props.sub_header_index, props.sub_h_sub_sec_index);
      }

    }
  };

  return (
    <>
      <button
        onClick={onDescSave}
        type="button"
        className="btn btn-success m-2"
      >
        {editMode ? "Save" : "Enable Edit Mode"}
      </button>
      {editMode ? (
        <QuillNoSSRWrapper
          theme="snow"
          modules={modules}
          formats={formats}
          placeholder="compose here"
          value={description}
          onChange={setDescription}
        />
      ) : (
        <div dangerouslySetInnerHTML={{ __html: description }} />
      )}
    </>
  );
}

I got the same issue when I upgrade my nextjs project from 11 to 12.

according to this issue, it seems to be related to swcMinify property in next.config.js.

everything works fine when I removed this line from next.config.js

// swcMinify: true

hope it works for you too.