Form validation + Select integration seems don't work

[tuchk4]

(simplified examples)

Select:

import { Select as BaseSelect } from "@radix-ui/themes";

export const Select = React.forwardRef(({ value, onChange }, ref) => {
  return (
    <BaseSelect.Root
      name={"complexity"}
      size={size}
      required
      value={value}
      onValueChange={onChange}
    >
      {/* Important to pass ref to Trigger */}
      <BaseSelect.Trigger ref={ref} placeholder={'Select value'} />
      <BaseSelect.Content>
        <BaseSelect.Item value={"1"}>1</BaseSelect.Item>
        <BaseSelect.Item value={"2"}>2</BaseSelect.Item>
      </BaseSelect.Content>
    </BaseSelect.Root>
  );
});

Form:

<Form.Root>
  <Form.Field name={"foo"}>
    <Form.ValidityState>
      {(validity) => {
        console.log(validity);
        return null;
      }}
    </Form.ValidityState>
    <Form.Control asChild>
      <Select />
    </Form.Control>
  </Form.Field>
</Form.Root>

Expected result:

• Validity State: if form is submit but select value is undefined - validity state should contain errors
• Focus: select component should be focused if it is the first input with errors

Actual result:

• Validity State*: it is always undefined
• Focus: the "hidden" native select is focused instead of Radix component. If press space right after submit, it opens the native select (see difference between screenshots)

"hidden" select:

radix select:

also getting this warning on submit if select's value is undefined:

Blocked aria-hidden on a <select> element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden. 

[tuchk4]

🤔