I am attaching a picture below.

I have a React app with a GLTF model in it. I can put a texture on this model, but for whatever reason, this texture (Starbucks logo) is duplicated. I don’t want it to be duplicated. What’s the problem here?

I’m using Three.js, React Three Fiber, React Three Drei.

Wrapper component:

<Canvas
      flat
      gl={{
        antialias: true,
        toneMapping: THREE.LinearToneMapping,
      }}
      camera={{ position: [7, 3, 8], fov: 20 }}
    >
      <ambientLight intensity={2.2} />
      <Model />
      <Environment preset="night" />
      <OrbitControls
        makeDefault
        enableDamping={false}
        enableZoom={false}
        enablePan={false}
      />
    </Canvas>

Part of the Model component (this is how the texture is loaded on the model):

const texture = useTexture(url);

<group>
   <mesh
        geometry={nodes.myModel.geometry}
        material={materials["material-name"]}
        material-color='#fff'
      >
        <Decal position={position} rotation={rotation} scale={scale}>
            <meshStandardMaterial
              map={texture}
              toneMapped={false}
              transparent
              polygonOffset
              polygonOffsetFactor={-1}
            />
          </Decal>
      </mesh>
</group>

Image:
GLTF model with duplicated texture

I tried ChatGPT and suggested me to inspect the model but I can’t, I’m not a designer. I checked the documentation too, couldn’t find anything related to this issue.