Adding center alignment in top is always bringing the cursor to the start

[mainak671]

I am using react quill to create a rich text editor.
Now inside the editor I am facing this bug:

1. First I add some text and make it center align.
2. Than by pressing enterI go to the next line. Here the problem starts.

• Problem 1: When I am clicking on left align to make the new line start from left , the cursor automatically goes to the start of the first line.
• Problem 2: I type something on the new line and make it left align, but now when I am presaing enter or space the cursor again goes to the start of the first line.

Here is my code, I am using react js.

  const modules = {
    toolbar: [
      [{ header: [1, 2, 3, false] }],
      ["bold", "italic", "underline"],
      [{ align: "" }, { align: "center" }, { align: "right" }],
      [{ list: "ordered" }, { list: "bullet" }],
      ["link"],
      ["clean"],
    ],
  }

<ReactQuill
        value={richTextContent}
        onChange={handleOnChange}
        theme={theme}
        className="quill-editor"
        bounds={`[data-text-editor="react-quill-editor"]`}
        modules={modules}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />