React 19: Warning: A props object containing a "key" prop is being spread into JSX from getCollectionProps

[lifeiscontent]

Describe the bug and the expected behavior

in React 19 key throws a warning when coming from props, and in the props from getCollectionProps it returns key

Conform version

v1.x

Steps to Reproduce the Bug or Issue

using React 19, use getCollectionProps and spread the values into a checkbox / radio to see the warning

What browsers are you seeing the problem on?

No response

Screenshots or Videos

No response

Additional context

No response

[mike1o1]

Possible duplicate of #600

[edmundhung]

I assume you are talking about the props object that we spread on the input element right?

// Example from the `getCollectionProps` docs
import { useForm, getCollectionProps } from '@conform-to/react';

function Example() {
  const [form, fields] = useForm();

  return (
    <>
      {getCollectionProps(fields.color, {
        type: 'radio',
        options: ['red', 'green', 'blue'],
      }).map((props) => (
        <label key={props.id} htmlFor={props.id}>
          <input {...props} />
          <span>{props.value}</span>
        </label>
      ))}
    </>
  );
}

I have a working solution that remove the need to pass the key on uncontrolled inputs. But I am still confirming how it would pair nicely with controlled input. I will share more next week :)