react-hook-form is properly set up, i’m using defaultValues

I’m trying to use html 5 and list for a dropdown box

but the status of ‘1’ appears in the box instead of it’s related option text.

slightly contrived example, the select is abstracted into an Input control

//comes from state management
const item={
  "body": "body b",
  "subject": "subject b",
  "id": "2",
  "status": 1,
  "result": 2
}
const status: [
  { "key": 0,"text": "pending"},
  { "key": 1,"text": "in progress"},
  { "key": 2,"text": "completed"},
  { "key": 3,"text": "cancelled"}
]

  const {
    control,
    formState: { errors },
    handleSubmit,
    reset,
  } = useForm({
    resolver,
  });
  const attributes={control,errors};

useEffect(() => {
    if (!isEmpty(item)) {
      reset(item);
    }
  }, [item]);
 const { field,fieldState } = useController(props);
return(
<>
 <form onSubmit={handleSubmit(onSubmit)}>
  <Input name="id" {...attributes} /> //goes to an abstracted control, working fine
  
  
  {/*
    i want "in progress" to display instead of "1". 
    yes i know <select/> is an option
   */}

  <datalist id={`statusList`}>
    {status.map((option) => (
      <option key={option.key} value={option.text} data-value={option.key} />
    ))}
  </datalist>
</>
)