Decal not loading material with texture

[dottodot]

In my app you can currently add a graphic to state with is persisted in local storage and this will be displayed using the Decal component below. This all works fine until I reload the page and pass it the exact same props and the image doesn't show.

const DecalGraphic = ({ flag, position, orientation, scale = 1 }: DecalGraphicProps) => {
  const texture = flag?.flag?.attributes?.image.data?.attributes?.url
    ? [flag.flag.attributes.image.data.attributes.url]
    : [];

  const [image] = useTexture(texture);

  if (!image) {
    return null;
  }

  return (
    <Decal position={position} rotation={rotation} scale={scale}>
      <meshPhongMaterial
        map={image}
        transparent
        depthTest
        depthWrite={false}
        polygonOffset
        polygonOffsetFactor={-10}
      />
    </Decal>
  );
};

However if I use the map prop on the Decal instead it works without issue.

 <Decal position={position} rotation={rotation} scale={scale} map={image} />

I also have the same issue when applying text where using the map prop isn't an option, so I'd like to try and understand what the issue is.

    <Decal position={position} rotation={rotation} scale={scale}>
      <meshStandardMaterial transparent depthTest depthWrite={false}>
        <RenderTexture attach='map'>
          <PerspectiveCamera makeDefault manual aspect={4 / 2} position={[0, 0, 5]} />
          <Text
            fontSize={2}
            anchorX='center'
            anchorY='middle'
            outlineColor={outlineColour}
            outlineWidth={outline}
          >
            {image && <meshBasicMaterial attach='material' map={image} />}
            {text?.text}
          </Text>
        </RenderTexture>
      </meshStandardMaterial>
    </Decal>