How to correctly set typescript for nested tables

const [products, setProducts] = useState<ProductsResponseSuccess[]>([]);
  const supabaseClient = useSupabaseClient<Database>();

  async function getProducts() {
    return await supabaseClient.from("products").select("*, vendor(*)");
  }

  type Vendors = Database["public"]["Tables"]["vendors"]["Row"];
  type ProductsResponse = Awaited<ReturnType<typeof getProducts>>;
  type ProductsResponseSuccess = ProductsResponse["data"] & {
    vendor: Vendors;
  };

  useEffect(() => {
    async function loadData() {
      const { data } = await getProducts();
      if (data) setProducts(data);
    }
    loadData();
  }, []);

const [products, setProducts] = useState<ProductsResponseSuccess[]>([]);
  const supabaseClient = useSupabaseClient<Database>();

  async function getProducts() {
    return await supabaseClient.from("products").select("*, vendor(*)");
  }

  type Vendors = Database["public"]["Tables"]["vendors"]["Row"];
  type ProductsResponse = Awaited<ReturnType<typeof getProducts>>;
  type ProductsResponseSuccess = ProductsResponse["data"] & {
    vendor: Vendors;
  };

  useEffect(() => {
    async function loadData() {
      const { data } = await getProducts();
      if (data) setProducts(data);
    }
    loadData();
  }, []);