Select initial value coming from the database

[j-fdion]

import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useState } from "react";

const fetchSelectedValue = async (id: string) => {
  const { data } = await axios.get(`/api/value/${id}`);
  return data; // Expected: `{ id: string, label: string }`
};

const fetchOptions = async (search: string) => {
  const { data } = await axios.get(`/api/options?search=${search}`);
  return data; // Expected: `Array<{ id: string, label: string }>`
};

const SelectComponent = ({ selectedId }: { selectedId: string }) => {
  const [search, setSearch] = useState("");

  // Query for the selected value (preselected)
  const { data: selectedValue, isLoading: selectedLoading } = useQuery({
    queryKey: ["selectedValue", selectedId],
    queryFn: () => fetchSelectedValue(selectedId),
    enabled: !!selectedId,
  });

  // Query for options (updates instantly when search changes)
  const { data: options, isLoading: optionsLoading } = useQuery({
    queryKey: ["options", search],
    queryFn: () => fetchOptions(search),
    staleTime: 5000, // Prevents unnecessary refetching
  });

  if (selectedLoading || optionsLoading) return <p>Loading...</p>;

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        className="border p-2 mb-2"
      />

      <select defaultValue={selectedValue?.id || ""}>
        <option value="">Select an option</option>
        {options?.map((opt) => (
          <option key={opt.id} value={opt.id}>
            {opt.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default SelectComponent;

I have this component where selectedId can already have data (when updating a form for example). I don't want to have the associated label value as an extra prop. Is this a good way to do this?