I have I component like this in a file:

export const ProfileForm: React.FC<ProfileFormProps> = ({
  isEditing,
  register,
  control,
  // more props
}) => {

And I'm passing it as a render prop to a component in another file:

<ItemEditForm
  renderForm={ProfileForm}
/>

//  renderForm: (props: RenderForm<TFormValues>) => React.ReactNode;
//   
//  {renderForm({
//    register,
//    control,
//    errors,
//   })
     

This works. However, I no longer get hot-reload in Next.js if I modify ProfileForm. But if I pass the component like this instead:

<ItemEditForm
  renderForm={(props: ProfileFormProps) => <ProfileForm {...props} />}
/>

I get the hot-reload back.

Why is this? Did I declare the render prop wrongly?