Texture on mesh (GLTF model) is duplicated/mirrored

[davidm94398]

I am attaching pictures below.

I have a React app with a GLTF (.glb) model in it. I can put a texture on this model, but for whatever reason, this texture (Starbucks logo, Nike logo) is duplicated/mirrored. What's the problem here?

I'm using React Three Fiber and 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>

Images: https://i.sstatic.net/4hP3f9kL.png https://i.imgur.com/mwS0EHn.png https://i.imgur.com/Qs8dZ2V.png

I also played with this example from the documentation (https://codesandbox.io/s/qvb1vk). The textures on the bunny don't duplicate/mirror. I loaded my model in this sandbox and I have the same problem.

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.

Thanks in advance.