ReactQuill default fonts (sans serif, serif and monospace) not working

Question

I have this react component, and I try to change the font of a text but it's hasn't effect.

This is my component:

<ReactQuill
  theme="snow"
  value={value}
  onChange={onChange}
  modules={QuillEditorControlled.modules}
  //   formats={QuillEditorControlled.formats}
/>

This is my modules JSON:

{
  toolbar: [
    // [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ font: [] }], // fonts
    [{ size: ["8px", "10px", "12px", "14px", "16px", "18px", "20px", "24px"] }], // custom dropdown
    ["bold", "italic", "underline", "strike", "clean"], // toggled buttons
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" }, // outdent
      { indent: "+1" }, // indent
      { align: [] }, // text alignment
    ],

    [
      //   { direction: "rtl" }, // text direction
      { script: "super" }, // superscript
      { script: "sub" }, //subscript
    ],
    [
      { color: [] }, // font color
      { background: [] }, // font background color
    ],
    ["link", "image"],
  ],
}

This is how the component looks: