React useEffect async method returning array

Question

I want to run async method and wait for the array.

My method preloadVideos doesn't return the array. What am I doing wrong?

When I console.log preloadedVideos in then section everythign is fine, but not returning. What should I change?

readyVideos is running only once and return [], but when the responses came and array has some values like [video1, video2, ...] then readyVideos is not returning, why?

Why my question is closed? Not even try to let people help me I found your articles but it is not the same context? Why you don't let people grow?

useEffect(() => {
    const preloadVideos = async (videos) => {
      const preloadedVideos = [];
      await videos.forEach((url) => {
        axios({
          url: url.url,
          method: 'GET',
          responseType: 'blob',
        }).then((response) => {
          const downloadedVideo = window.URL.createObjectURL(new Blob([response.data]));
          preloadedVideos.push({ url: downloadedVideo });
        });
      })
      return preloadedVideos;
    };

    if (url && isNotSingleVideo) {
        const readyVideos = preloadVideos(url);
        if (readyVideos.length === url.length) {
          console.log('I AMA READDYY', readyVideos, url);
          setVideosToWatch(readyVideos);
        }
      }
    }
}