Invalid `Select` value in the `form` entries about themes HOT 3 OPEN

import { useState, useCallback } from 'react';
import { Button, Select } from '@radix-ui/themes';
import { v4 as uuidv4 } from 'uuid';

const colors = [
  { value: 'red', label: 'Color red' },
  { value: 'green', label: 'Color green' },
  { value: 'blue', label: 'Color blue' },
];

export default function App() {
  const [color, setColor] = useState('');
  const [key, setKey] = useState(uuidv4());

  const reset = useCallback(() => {
    setColor('');
    setKey(uuidv4()); // Change key to reset Select component
  }, []);

  const handleSubmit = useCallback((event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    console.log(Object.fromEntries(form.entries()));
  }, []);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <Select.Root key={key} name="color" onValueChange={setColor}>
          <Select.Trigger placeholder="Select a color" />
          <Select.Content>
            <Select.Group>
              {colors.map((color) => (
                <Select.Item key={color.value} value={color.value}>
                  {color.label}
                </Select.Item>
              ))}
            </Select.Group>
          </Select.Content>
        </Select.Root>
        <input type="hidden" name="color" value={color} />
        <Button type="submit">Submit</Button>
        <Button type="button" variant="outline" onClick={reset}>
          Clear
        </Button>
      </form>
    </div>
  );
}