[Solved]-Objects are not valid as a React child (found: object with keys {children})-Reactjs

As the error says, you are trying to use an object as a react component (childProp.title, and childProp.content). It seems you want to use their children as "content".

import { useMemo } from "react";

const useChildProps = (children, whitelist) => {
  return useMemo(() =>
    [].concat(children).reduce(
      (childProps, child) => {
        if (whitelist && !whitelist.includes(child.type)) {
          throw Error(`element <${child.type}> is not supported`);
        }
        childProps[child.type] = child.props;
        return childProps;
      },
      {})  // better make this an object, not an array that you were monkey-patching properties into
  );
};

export default useChildProps;

import useChildProps from "./useChildProps";

const ModalFromTheFuture = ({ children }) => {
  const childProps = useChildProps(children, [
    "title",
    "contents",
    "actionButton",
    "cancelButton"
  ]);
  console.log(childProps);
  delete childProps.actionButton.children;
  delete childProps.cancelButton.children;

  return (
    <div>
      <header>{childProps.title && <h1> {childProps.title.children}</h1>}</header>

      <section>
        <p>{childProps.contents && childProps.contents.children}</p>
      </section>

      <footer>
        {childProps.actionButton && <button {...childProps.actionButton} />}
        {childProps.dismissButton && <button {...childProps.cancelButton} />}
      </footer>
    </div>
  );
};