the fetched data is not being displayed correctly despite the state update

"use client";
export default function SearchBar() {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [products, setProducts] = useState();
  const [isLoading, setLoading] = useState(false);
  // const [isPending, startTransition] = useTransition();
  const debouncedQuery = useDebounce(query);

  const fetchData = async (debouncedQuery) => {
    setLoading(true);
    try {
      const data = await filterProducts(debouncedQuery);
      console.log(data);
      setProducts(data);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    if (query.length <= 0) {
      setProducts(null);
      return;
    }

    fetchData(debouncedQuery);
  }, [debouncedQuery]);

  return (
    <div className="border rounded-xl p-1 cursor-pointer hover:bg-white hover:text-black">
      <SearchIcon className="h-[25px] w-[24px]" onClick={() => setOpen(true)} />
      <CommandDialog
        className="rounded-lg border"
        open={open}
        onOpenChange={(open) => {
          setOpen(open);
          if (!open) {
            setQuery("");
          }
        }}
      >
        <CommandInput
          value={query}
          onValueChange={setQuery}
          placeholder="Type a command or search..."
        />
        <CommandList>
          {isLoading ? (
            <LoadingSkeleton/>
          ) : (
            <div className="bg-red-500">
              {products?.map((product) => {
                console.log("yo");
                return (
                  <CommandItem>
                    <span>{product.name}</span>
                  </CommandItem>
                );
              })}
            </div>
          )}
        </CommandList>
      </CommandDialog>
    </div>
  );
}