I am getting this error when I am just trying to pass props around. Very basic stuff.

interface Props extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, ChakraProps {

  handleMoveAll: () => void

}



export const MyWrapper: FC<Props> = (props): JSX.Element => (

  <div {...props}>

    <IconBox label="Move All" onClick={props.handleMoveAll}>

      <MyIcon />

    </IconBox>

  </div>

)

And then I call the component MyWrapper on its parent where the warning is coming from.

export const ParentComp: FC<{}> = (): JSX.Element => {

  const myFunction = () => console.log('Hit it')



  return (

      <MyWrapper handleMoveAll={() => myFunction()}>

         <p>Child Component</p>

      </MyWrapper>

  )

}

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

If I remove this handleMoveAll={() => myFunction()} the warning is gone.

Any ideas?