Как я могу открыть динамический c Модал, используя реаги и редуксы?

Question

Я пытаюсь открыть динамический c модальный, используя редукционное действие, как в коде ниже. Модал должен рендерить динамические c компоненты, которые я передаю (это могут быть элементы Dom или компоненты React). Когда я пытаюсь запустить код, я сталкиваюсь со следующей ошибкой Uncaught Error: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead..

Урезанная версия кодов

<Button
          onClick={() =>
            props.addModal({
              title: "Hello World",
              components: () => (
                <div>
                  <h1>Welcome</h1>
                  <p>Lorem ipsum dolor sit.</p>
                </div>)
            })
          }
        >
          Open Modal
        </Button>

Действие Redux:

function addModal({id = false, title, content, components}) {
  if (!id) {
    id = uuid();
  }

  return {
    type: types.ADD_MODAL,
    payload: {
      id,
      title,
      components,
      isOpen: true
    }
  };
}

Затем по модальному компоненту:

import React from "react";

export default function ModalItem({title, content, components, id}) {

  return (
    <div className={styles.wrapper} id={id}>
      <h3>{title}</h3>
      {content && <p>{content}</p>}
      {components}
    </div>
  );
}