When using getFieldList with getInputProps, warning of key prop

[AkifumiSato]

Describe the bug and the expected behavior

When getFieldList and getInputProps are used together, warn is displayed about the key prop being spread. I can work around this by explicitly setting key={undefined}, but it seems redundant.

Conform version

v1.0.6

Steps to Reproduce the Bug or Issue

1. form code:

export default function Form() {
  const [form, fields] = useForm({
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: teamSchema });
    },
    shouldValidate: "onBlur",
  });
  const members = fields.members.getFieldList();

  return (
    <form {...getFormProps(form)} noValidate>
      <button
        type="submit"
        {...form.insert.getButtonProps({
          name: fields.members.name,
        })}
      >
        Add member
      </button>
      {members.map((member, index) => {
        const memberFields = member.getFieldset();

        return (
          <div key={member.key}>
            <div>Member {index + 1}</div>
            <input type="hidden" name={memberFields.id.name} value={index} />
            <label>
              engineer:&nbsp;
              <input
                {...getInputProps(memberFields.engineer, {
                  type: "checkbox",
                })}
                key={undefined}
              />
            </label>
          </div>
        );
      })}
      <button type="submit">submit</button>
    </form>
  );
}

2. Add member click
3. console.error

Warning: A props object containing a "key" prop is being spread into JSX:
let props = {key: someKey, id: ..., name: ..., form: ..., type: ...};
<input {...props} />...

What browsers are you seeing the problem on?

No response

Screenshots or Videos

No response

Additional context

No response

[edmundhung]

This is a warning only happens with Nextjs. It complains that you are spreading the result of getInputProps on the input element which does include a key property to support the update and reset intent. This does not happens to other frameworks like Remix or even any SPA with React 18. Unfortunately, I am also unsure why Nextjs added this warning.

I have an idea that might allow Conform to remove the need of key in the future. But, for now, the only workaround is to specify the key manually as you did, but please specify the key provided by Conform instead of passing undefined like this:

<input
  {...getInputProps(memberFields.engineer, {
    type: "checkbox",
  })}
  key={memberFields.engineer.key}
/>

[AkifumiSato]

Thanks for the research.
I see...
I think this is not from Next.js, but from React Canary which Next.js uses? If that is correct, it may be possible that this warn may occur in React v19 as well, so it would be great if it is eventually addressed!