Race condition with React hook

I’m putting the finishing touches on my first React application. But one annoying problem: I need to cache thumbnails for the items I am displaying. So I’m using a useEffect which can be simply stated like this:

  var thumbnailLookUp = {};

  useEffect(() => {
    fetch("http://localhost:3003/thumbnailPreload")
      .then((response) => response.json())
      .then((data) => {
        for (var row of data) {
          thumbnailLookUp[row.uuid] = row.thumb;
        }
      })
      .then(countClips())
      .catch((err) => {
        console.log(err.message);
      })
  }, []);

The countClips function assembles the data list which will be rendered by a map() in the primary render. This includes the following, where CardMedia is a @mui custom component:

              <CardMedia
                component="img"
                height="100"
                src={`https://d3pe68qfxlhu0a.cloudfront.net/${
                  thumbnailLookUp[event.uuid]
                }`}
              />

Well here’s the thing. When I do a full reload of the page, half the time this works, and the other half the time I get undefined for the results of every thumbnailLookUp[event.uuid]. It’s consistent: if one fails, they all fail, if one succeeds, they all succeed. This tells me there’s some kind of a race condition between the effect and the render, which is not something I’ve ever read about. I can guarantee success by placing a breakpoint!

How can I tighten this up so that thumbnailLookUp is always populated before the render (or a second render, if that’s really necessary)?