I am using rtk-query to fetch data from API. I also have context that I am using for child components. Problem that I am facing is that context gets rendered before data is finished fetching. Here is my code:

export const defaultContext = {
    header: {},
};
export const MyContext = React.createContext(defaultContext);

export default function Page() {
    const [myData, setMyData] = useState();
    useEffect(() => {
        const { data, isError, isFetching, isLoading } = useFetchMyQuery();
        setMyData(data);

    }, [data, isError, isFetching, isLoading ]);

    if (isFetching) {
        return <Loader message={loadingText} />;
    }

    return (
      <DndProvider backend={HTML5Backend}>
        <MyContext.Provider value={myData}>
          <div className={`${styles.page} ${className}`}>
            <div className={styles.leftSide} />
            <div className={styles.rightSide} />
            {children}
          </div>
        </MyContext.Provider>
      </DndProvider>
    );
}

What I am doing wrong here? Tnx.