I've got a component that wrap any children that I give him. This component has a useState to give an editMode status and setter. So inside this component, to pass this state, I've done it like this :

import ShowMoreWrapper from 'components/ui/showmore/ShowMoreWrapper'

type PropsTypes = {
  children: JSX.Element
}

const TargetCard = ({
  children,
}: PropsTypes): JSX.Element => {
  const [editMode, setEditMode] = useState(false)

  return (
        <ShowMoreWrapper initialHeight={initialHeight} maxHeight={maxHeight}>
          {cloneElement(children, {
            editMode,
            setEditMode,
          })}
        </ShowMoreWrapper>
  )
}

Then

 <TargetCard>
    <ProfileDetails />
 </TargetCard>

And inside my children component, I received it like this :

type ProfileDetailsTypes = {
  editMode?: boolean
  setEditMode?: React.Dispatch<React.SetStateAction<boolean>>
}

const ProfileDetails = ({
  editMode,
  setEditMode,
}: ProfileDetailsTypes): JSX.Element => {

Inside this component, I use editMode as a boolean to display/hide things and setEditMode as a setter, like this example :

{editMode && <div>Hello world</div>}
<div onClick={() => setEditMode(false)}>Cancel edit mode</div>

But on render I've this double error :

React does not recognize the `editMode` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `editmode` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

React does not recognize the `setEditMode` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `seteditmode` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

In another child component I don't have any problem to deal with them, but on this one, I'm stuck... Can you see something obvious in my code ? Thanks.