I need to clone the component and insert it to the current components. I was able to do this, but when I clone the component, the values in the previous component are cleared. I need the values in the previous component to be preserved, and the values in the new cloned component to be empty. How can I do that?

import FirstBlocks from './FirstBlocks';
import SecondBlock from './SecondBlock';
import { useState } from 'react';

const formBlocks = [
  {
    Component: FirstBlock,
    props: {
      title: 'first block',
    },
    id: 1,
  },
  {
    Component: SecondBlock,
    props: {
      title: 'second block',
    },
    id: 2,
  },
];

const Form = () => {
  const [formItems, setFormItems] = useState(formBlocks);

  return (
    <>
      {formItems.map(({ Component, props, id }, index) => {
        const cloneBlock = () =>
          setFormItems((formItems) => {
            const newFormItems = [...formItems];
            newFormItems.splice(index + 1, 0, {
              Component,
              props,
              id: Date.now(),
            });
            return newFormItems;
          });

        return <Component {...props} key={id} cloneBlock={cloneBlock} />;
      })}
    </>
  );
};

export default Form;