How to use the tiptap-extensions.ListItem function in tiptap-extensions

// schema.marks:
        marks.bold && new Bold(),
        marks.italic && new Italic(),
        marks.underline && new Underline(),
        marks.strike && new Strike(),
        marks.small && new Small(),
        marks.code && new Code(),
        marks.link && new LinkWithTitle(),

        // schema.nodes:
        nodes.blockquote && new Blockquote(),
        nodes.codeBlock && new CodeBlock(),
        new HardBreak(), // TODO: Should this always on?
        nodes.heading && new Heading({ levels: nodes.heading }),
        nodes.horizontalRule && new HorizontalRule(),
        (nodes.orderedList || nodes.bulletList) && new ListItem(),
        nodes.bulletList && new BulletList(),
        nodes.orderedList && new OrderedList(),
        // TODO:
        // nodes.todoList && new TodoItem(),
        // nodes.todoList && new TodoList(),

        // schema.tools:
        tools.history && new History()
      ].filter(extension => !!extension)
    },

const content = this.value || ''
      const extensions = [
        new History(),
        new HardBreak()
      ]

      if (this.placeholder && this.placeholder.length > 0) {
        extensions.push(new Placeholder({
          emptyNodeClass: 'is-empty',
          emptyNodeText: this.placeHolder,
          showOnlyWhenEditable: true
        }))
      }

      if (this.toolbar.ordered || this.toolbar.bullet) {
        extensions.push(new ListItem())
      }

      Object.keys(this.toolbar).forEach(tool => {
        switch (tool) {
          case 'header': {
            const levels = this.toolbar[tool].filter(level => typeof level === 'number')
            levels.forEach(level => {
              this.headingOptions.push(level)
            })
            extensions.push(new Heading({
              levels: levels
            }))
            break
          }
          case 'bold': {
            extensions.push(new Bold())

export default function defaultExtensions(component) {
  const { placeholder, $t, $apollo } = component
  return [
    new Heading(),
    new HardBreak(),
    new Blockquote(),
    new BulletList(),
    new OrderedList(),
    new HorizontalRule(),
    new Bold(),
    new Italic(),
    new Strike(),
    new Underline(),
    new Link(),
    new Heading({ levels: [3, 4] }),
    new ListItem(),
    new Placeholder({
      emptyNodeClass: 'is-empty',
      emptyNodeText: placeholder || $t('editor.placeholder'),
    }),
    new Embed({
      onEmbed: async ({ url }) => {
        const {
          data: { embed },
        } = await $apollo.query({ query: EmbedQuery(), variables: { url } })
        return embed
      },
    }),
    new LegacyEmbed({
      onEmbed: async ({ url }) => {
        const {
          data: { embed },