title: How to clone React component and save its state
body: <p>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?</p>
  <pre><code>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 = () =&gt; {
    const [formItems, setFormItems] = useState(formBlocks);
  
    return (
      &lt;&gt;
        {formItems.map(({ Component, props, id }, index) =&gt; {
          const cloneBlock = () =&gt;
            setFormItems((formItems) =&gt; {
              const newFormItems = [...formItems];
              newFormItems.splice(index + 1, 0, {
                Component,
                props,
                id: Date.now(),
              });
              return newFormItems;
            });
  
          return &lt;Component {...props} key={id} cloneBlock={cloneBlock} /&gt;;
        })}
      &lt;/&gt;
    );
  };
  
  export default Form;
  </code></pre>