The React.cloneElement() function returns a copy of a specified element. You would use this function when a parent component wants to add or modify the prop(s) of its children.

Usaría esta función cuando un componente principal desea agregar o modificar las propiedades de sus elementos secundarios.

import { cloneElement } from 'react'

const Hello = ({ name, lastname = null }) => <h1>Hello {name} {lastname?lastname:'-'}</h1>

const App = () => {

  const element = <Hello name="Milo" />

  return (
    <div>
      {cloneElement(element, { name: 'Pepito' })}
      {cloneElement(element, { name: 'Pepito', lastname: 'Paris' })}
    </div>
  )
}