Babel ожидает "," там, где должно быть "."?

Итак, следующая реализация отлично работает для чтения данных JSON и превращения их в визуализированные компоненты, пока я не попытаюсь добавить дочерние элементы. Потом выдает ошибку.

функция:

const catalogRenderer = (config) => {
  if (typeof KeysToComponentMap[config.component] !== "undefined") {
    return React.createElement(
      KeysToComponentMap[config.component],
      {
        key: config.key,
        title: config.title
      },
      {
        config.children && config.children.map(c => catalogRenderer(c))
      }
    );
  }
}

ошибка:

app.js:134 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js)
"...Scripts/CatalogRenderer.js: Unexpected token, expected "," (25:14)"

консоль:

 },
  24 |       {
> 25 |         config.children && config.children.map(c => catalogRenderer(c))
     |               ^
  26 |       }
  27 |     );
  28 |   }

Я использую React как часть электронного приложения, это длинная история обо всех движущихся частях, но все остальное до сих пор работало просто отлично. В редакторе, если я перейду к предыдущему { от загадочно нелюбимого . в строке 25 точка выделяется, как будто это должно каким-то образом закрыть скобку.

Я что-то не понимаю в синтаксисе здесь? То же самое произойдет, если я попытаюсь просто отобразить и отобразить дочерние элементы следующим образом:

      {
        config.children.map(c => catalogRenderer(c))
      }

Я пытался заключить все утверждение в скобки, фигурные скобки, круглые скобки — независимо от того, что я делаю, кажется, что Babel ожидает запятую, но запятая, очевидно, не помогает. Любая идея, что я делаю неправильно?

eta: это объект JSON, из которого я пытаюсь выполнить рендеринг:

    const catConfig = {
      catalog: [
        {
          component: 'pen',
          title: `B.C. Palmer`,
          key: `B.C.PalmerPen`,
          children: `A child string`
        },
        {
          component: 'content',
          key: `B.C.PalmerWorldList`,
          children: [
            {
              component: 'world',
              title: `Rismere`,
              key: `RismereWorld`
            },
            {
              component: 'content',
              key: `RismereSeries`,
              children: [
                {
                  component: 'series',
                  title: `The Eidolon War`,
                  key: `TheEidolonWarSeries`
                },
                {
                  component: 'content',
                  key: `TheEidolonWarBooks`,
                  children: [
                    {
                      component: 'book',
                      title: `Magic's Heart`,
                      key: `MagicsHeartBook`
                    },
                    {
                      component: 'book',
                      title: `Magic's Fury`,
                      key: `MagicsFuryBook`
                    },
                    {
                      component: 'book',
                      title: `Magic's Grace`,
                      key: `MagicsGraceBook`
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          component: 'pen',
          title: `Simon Strange`,
          key: `SimonStrangePen`
        }
      ]
    }

Этот JSON будет генерироваться посредством вызова базы данных и записываться каждый раз при обновлении базы данных и обновлении состояния компонента «каталог».

Так, например, второй объект в массиве каталогов выше — это контейнер, который при щелчке по первому компоненту «ручка» становится видимым и показывает список компонентов «мира» (в данном случае только один). , функция успешно отображает только любые «родительские» компоненты — если я уберу фигурные скобки в строках 24 и 26, она просто пропустит их, но не выдаст ошибку.

Компоненты состоят из кнопок и div (контента). Кнопки, вероятно, станут элементом Link, когда я заработаю, но исходная версия была написана на ванильном javascript, я еще не реализовал маршрутизацию с каталогом. Итак, компонент пера, например:

import React from 'react'

export default penButton => {
  return(
    <button className = "catalogItem pen">
      <img src = "src/icons/catPenName.png" className = "catalogIcon"/>
      <p className = "contentLabel">{penButton.title}</p>
    </button>
  )
}

Является компонентом верхнего уровня и прекрасно отображается. Его следующий элемент (и следующий элемент любой кнопки, кроме книги) содержит:

import React from 'react'

export default contentList => {
  return(
    <div className = "contentList">
    </div>
  )
}

contentList — это просто div с классом contentList, который отвечает за видимость и анимацию. Должен ли я иметь место для ключа «дети» в JSON для заполнения дочерних элементов контента?