I am trying to populate a react hook form with a select dropdown which is populated from a backend table. This form is leveraged for

• adding a new place
• editing a place and in this case it is pre-populated with attributes of the place

leveraging useForm

 const { register, handleSubmit, reset, getValues, formState } = useForm({
    defaultValues: editValues,
  });

Select field in form
populating it from hostedSpaces which i am getting from backend using a hook on top of API call
registering spaceName for edit using defaultValues: editValues

<Select
            id="spaceName"
            disabled={isEditSession}
            onChange={handleSelect}
            {...register("spaceName", { required: "This field is required" })}
          >
            <option key="nullSelect" value={""}>
              Select...
            </option>
            {hostedSpaces.map((space) => (
              <option key={space.hspaceName} value={space.hspaceId}>
                {space.hspaceName}
              </option>
            ))}
          </Select>

While Add new functionality , i am able to get both id and name assigned but with edit the form i am not able to set the value to right id as it’s just name which gets registered. How can i assign key value pair during register ?