Dynamic loading of React components using a JSON config

DynamicComponents.js

import React, { lazy, Suspense } from 'react'
import Spinner from '../../ui/spinner/Spinner' // Some Spinner

const config = [
  {
    name: 'First',
    path: './First',
    props: {name: 'Yannis', surname: 'Marios'}
  },
  {
    name: 'Second',
    path: './Second',
    props: {name: 'John', surname: 'Doe'}
  }
]

const importedComponents = () => {
  const components = {}
  for(let i = 0; i < config.length; i++) {
    components[config[i].name] = lazy(() => import(`${config[i].path}`))
  }
  return components
}

const DynamicComponents = () => {
  const Components = importedComponents()

  const components = config.map(c => {
    const Component = Components[c.name]
    return <Suspense key={c.name} fallback={<Spinner/>}><Component key={c.name} {...c.props} /></Suspense>
  })
  return <div>{components}</div>
}

export default DynamicComponents

First.js

import React from 'react'

const First = ({name, surname}) => {
  return <div>{name} {surname}</div>
}

export default First

Second.js

import React from 'react'

const Second = ({name, surname}) => {
  return <div>{name} {surname}</div>
}

export default Second