Cesium ImageryLayer Not Working on Map load - cesiumjs

Question

When the map loads and this component gets hit my layer doesn't show up and it doesn't make a network request to OpenSeaMap. However, if I set a timer the layer will show up after 10 seconds (arbitrary number). I tried checking if Cesium's viewer or camera were defined, before loading, but that didn't work.
I am at a loss of what a good solution is here, this clearly isn't it. Both provider objects are exactly the same when it works vs. when it doesn't.
export const TiledImageryOverlay = memo(({ urlTemplate, bounds, blackAsAlpha }: ITiledImageryOverlayProps) => {
const boundingRectangle = bounds
? Rectangle.fromCartographicArray(
bounds.map(point => Cartographic.fromDegrees(point.lon ?? 0 - 1, point.lat ?? 0))
)
: undefined;
const provider = useMemo(() => {
return new UrlTemplateImageryProvider({
url: urlTemplate,
rectangle: boundingRectangle
});
}, [urlTemplate, boundingRectangle]);
const layerAlpha = blackAsAlpha ? new Color(0, 0, 0, 0) : undefined;
return <ImageryLayer imageryProvider={provider} rectangle={boundingRectangle} colorToAlpha={layerAlpha} />;
});
export const TiledImageryOverlay = memo(({ urlTemplate, bounds, blackAsAlpha }: ITiledImageryOverlayProps) => {
const [show, setShow] = useState<boolean>(false);
const boundingRectangle = bounds
? Rectangle.fromCartographicArray(
bounds.map(point => Cartographic.fromDegrees(point.lon ?? 0 - 1, point.lat ?? 0))
)
: undefined;
useEffect(() => {
setTimeout(() => {
setShow(true);
}, 10000);
}, [setShow]);
const provider = useMemo(() => {
return new UrlTemplateImageryProvider({
url: urlTemplate,
rectangle: boundingRectangle
});
}, [urlTemplate, boundingRectangle]);
const layerAlpha = blackAsAlpha ? new Color(0, 0, 0, 0) : undefined;
if (!show) return null;
return <ImageryLayer imageryProvider={provider} rectangle={boundingRectangle} colorToAlpha={layerAlpha} />;
});