Deferred loaders & non-interactive elements on the page

[JUNIORCO]

Say I have a deferred loader like

export const loader = async () => {
  const myObjPromise = getMyObj(); // returns a promise

  return defer({ myObj: myObjPromise });
};

And I'm rendering this:

export default function Page() {
  const { myObj } = useLoaderData();
  const [searchParams, setSearchParams] = useSearchParams();

  const searchQ = searchParams.get("q");

  const onValueChange = (value) => {
    setSearchParams((prev) => {
      prev.set("q", value);
      return prev;
    });
  };

  return (
    <div>
      <select value={searchQ} onValueChange={onValueChange}>
         ... // select options
      </select>
      <Suspense fallback={<Skeleton />}>
        <Await resolve={myObj}>
            {(myObj) => ( )} // render myObj when its resolved
        </Await>
      </Suspense>
    </div>
  );
}

If there's a brief latency for getMyObj to resolve, the select component isn't clickable for some reason. Only after the promise resolves can I click on the select.

Is this the expected behaviour? I'm a bit confused on why this is happening.