Sanity Serializers + Hyperscript + 11ty (Экранирование после второго значения)

Question

Мне постоянно снятся сериализаторы Sanity и 11TY.

У меня 11ty + Sanity настроен с помощью BlocksToHTML следующим образом:

На .eleventy.js

          // Portable Text to HTML Filter for Sanity
eleventyConfig.addFilter('sanityToHTML', function(value) {
    return blocksToHtml({
      blocks: value,
      serializers: serializers
    })
  })

На serializers.js

      const blocksToHtml = require('@sanity/block-content-to-html')
const h = blocksToHtml.h


module.exports = {
  types: {
      cta: ({ node }) => {
        return h(
          'a',
          {
            className:
              'bg-yellow-500 text-white',
            href: node.ctaUrl,
          },
          node.ctaText,
        )
      },
      infoText: ({ node }) => {
        return h(
          'p',
          {
            className: 'bg-blue-500 text-white',
          },
          node.bodyInfo.map(({children}) => children.map(child => child.text)).flat().join(''),
        )
      },
      prosAndCons: ({ node }) => {

        return h('div.grid.grid-cols-2.#prosCons',

        h('div',
          h('ul',
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[0]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[1]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[2]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[3]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[4]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[5]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[6]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[7]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[8]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[9]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[10]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[11]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[12]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[13]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[14]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[15]))),

        h('div',
          h('ul',
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[0]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[1]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[2]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[3]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[4]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[5]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[6]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[7]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[8]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[9]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[10]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[11]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[12]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[13]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[14]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[15]))))
      },

    productTable: ({ node }) => {
      return h('div#page',
      h('div#header',
        h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
      h('div#menu', { style: {'background-color': '#2f2'} },
        h('ul',
          h('li', 'one'),
          h('li', 'two'),
          h('li', 'three'))),
        h('h2', 'content title',  { style: {'background-color': '#f22'} }),
        h('p',
          "so it's just like a templating engine,\n",
          "but easy to use inline with javascript\n"),
        h('p',
          "the intention is for this to be used to create\n",
          "reusable, interactive html widgets. "))
    },
  },

    marks: {
      link: ({ children, mark }) =>
        h(
          'a',
          {
            className: 'pointer underline hover:no-underline',
            href: mark.href,
          },
          children,
        ),
    },
  }

Код infoText был любезно предоставлен @person_v1.32 по моему предыдущему вопросу (сериализаторы Sanity в Eleventy (11ty) ).

Теперь используемый синтаксис взят прямо из https://github.com/hyperhype/hyperscript.

Таким образом, "prosAndCons" выводит ТОЛЬКО ПЕРВЫЕ ДВА значения (pro1, pro2 и con1, con2).

ЕСЛИ я подниму пример кода из Hyperscript, как показано в «productTable», он ТАКЖЕ УДАЛЯЕТСЯ после «два».

Кажется, здесь есть образец, и я не понимаю, хоть убей, что это такое.

Какие-нибудь советы? Большое спасибо.