React uncontrolled input warning

[tukiminya]

Hello, I tried to make DatePicker compoment with shadcn/ui like this:

type DatePickerProps = {
  meta: FieldMetadata<string>
}
const DatePicker = ({ meta }: DatePickerProps): JSX.Element => {
  const control = useInputControl(meta)

  return (
    <>
      <Input
        name={meta.name}
        value={control.value}
        defaultValue={meta.initialValue ?? ""}
        tabIndex={-1}
        readOnly={true}
      />
      <Popover>
        <PopoverTrigger asChild>
          <Button type="button" variant="outline">
            <CalendarFold className="mr-2 h-4 w-4" />
            {control.value ? format(new Date(control.value), "yyyy/MM/dd") : "Select date"}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="h-fit w-fit p-0">
          <Calendar
            mode="single"
            selected={new Date(control.value ?? "")}
            onSelect={(date) => control.change(date?.toISOString())}
            fixedWeeks
          />
        </PopoverContent>
      </Popover>
    </>
  )
}

I have added readonly property to Input component for fix warning, but A React error occurred (uncontrolled input warning) when selecting a date in the Calendar component.

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

How can this problem be resolved?

p.s. For developers: Thank you for your great project!