Getting empty array in useContext in section component initially due to which the section component is empty .Please help me fix this.

//this is my context component

export const Products = createContext();

export const ProductContext = (props) => {
  const [state, setState] = useState([]);
  useEffect(async () => {
    try {
      const res = await fetch("https://demo7303877.mockable.io");
      const items = await res.json();
      console.log(items);
      // console.log(items.products);
      setState(items);
    } catch (err) {
      console.log(err);
    }
  }, []);

  return (
    <Products.Provider value={[state, setState]}>
      {props.children}
    </Products.Provider>
  );
};

//getting empty array initially in state //this is section component

import React, { useContext, useState } from "react";
import { Products } from "../Context/ProductsContext";

function Section() {
  const [state, setState] = useContext(Products);
console.log (state) //this return an empty array initially

return (
    <div>
      {state.length > 1 &&
        state.products.map((p) => {
          return <p> {p.brand}</p>;
        })}
    </div>
  );
}

export default Section;