how can i set default text alignment in react-quill to right?

Question

I want the default text-align to be right in react quill, i couldn't find a way to do that.

Here is my text editor:

import dynamic from 'next/dynamic'
import { ReactQuillProps } from 'react-quill'
import 'react-quill/dist/quill.snow.css'

const ReactQuill = dynamic(import('react-quill'), { ssr: false })

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],

  [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ direction: 'rtl' }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],

  ['clean'],
]

export default function BasicTextEditor({
  value,
  onChange,
  placeholder,
}: {
  placeholder: string
  value: string
  onChange: () => void
}) {
  const quillProps: ReactQuillProps = {
    modules: {
      toolbar: toolbarOptions,

    },
  }

  return (
    <ReactQuill
      className="whitespace-pre-line"
      {...quillProps}
      placeholder={placeholder}
      theme="snow"
      value={value}
      onChange={onChange}
    formats={[{}]}
      />
  )
}

As you can see there is an option called {align: []}, i want by default my text be

Right now for me to change the alignment of the text i have to add a class manly to each element in the text but i want a better way to achieve it.