Displaying firebase images with GatsbyImage

[kickbk]

Is there a way to use an image hosted on firebase with GatsbyImage?

My image is https://firebasestorage.googleapis.com/v0/b/dineden-app.appspot.com/o/users%2FVucDBF1ovcQDESmdRt8sJhbdiph1%2Fmeals%2Fimages%2F1643756365344.jpg?alt=media&token=06819ff3-1f50-4a45-890e-e61988105b87
When I add it with <img src={firstMealImageUrl} /> it shows it, but when I try <GatsbyImage src={firstMealImageUrl} alt="Meal Image" /> or when I try to fetch the data and pass it to GatsbyImage like so:

const imageData = getImage(image_url);
<GatsbyImage src={imageData} alt="Meal Image" />

then it fails with [gatsby-plugin-image] Missing image prop and Failed prop type: The prop "image" is marked as required in "GatsbyImage", but its value is "undefined".

How do you do this correctly?
Or perhaps I can use StaticImage somehow?

[kickbk]

I see, so remote images fetched when building pages should be downloaded locally with createRemoteFileNode in onCreateNode and served with GatsbyImage. When you use StaticImage with a fixed src, Gatsby downloads that image to create optimized versions of it.