Floara editor plugin(Lists) buttons not showing in react js (Next JS)

Question

I'm working on react JS with Next js. I added Floara editor plugin. But There is showing some limited toolbar buttons. I need a list format icon and some paragraph formats also in toolbar button. Kindly anyone let me know how to over come this issue.

    import React from "react";
import dynamic from "next/dynamic";
import "froala-editor/css/froala_style.min.css";
import "froala-editor/css/froala_editor.pkgd.min.css";
import "font-awesome/css/font-awesome.css";
const FroalaEditor = dynamic(import("react-froala-wysiwyg"), {
  ssr: false
});

dynamic(import("froala-editor/js/froala_editor.min.js"), { ssr: false });
dynamic(import("froala-editor/js/froala_editor.pkgd.min.js"), { ssr: false });
dynamic(import("froala-editor/js/plugins.pkgd.min.js"), { ssr: false });
dynamic(import("froala-editor/js/plugins/lists.min.js"), { ssr: false });
dynamic(import("froala-editor/js/plugins/paragraph_format.min.js"), {
  ssr: false
});
dynamic(import("froala-editor/js/plugins/paragraph_style.min.js"), {
  ssr: false
});

export const config = {
    toolbarButtons: [
      "bold",
      "italic",
      "underline",
      "strikeThrough",
      "|",
      "paragraphStyle",
      "|",
      "paragraphFormat",
      "align",
      "formatOL",
      "formatUL",
      "outdent",
      "indent",
      "quote"
    ],
    pluginsEnabled: ["align", "lists", "paragraphFormat", "paragraphStyle"],
    buttonsVisible: 12,
    charCounterMax: 1000,
    placeholderText: "",
    listAdvancedTypes: false
  };


export default ({ config, model, handleEditorChange, style }) => {
  return (
    <div style={style}>
      <FroalaEditor
        tag="textarea"
        config={config}
        model={model}
        onModelChange={handleEditorChange}
      />
    </div>
  );
};