A-frame: How to turn the mirrored sphere geometry image to right orientation?

How to mirror the image so that it is in the right orientation?

I have followed the solution that @Piotr Adam Milewski for this stack question: how-to-curve-a-plan-entity-to-match-a-sphere-surface. Setting the material repeat to -1 also does not change the mirrored image. I am using aframe-sprite-sheet component to animate the sprite-sheet animation.

    <script>
        AFRAME.registerComponent("match-sphere", {
          schema: {
            target: {
              type: "selector",
            },
          },
          init() {
            const sphere = this.data.target;

            this.el.setAttribute("radius", sphere.getAttribute("radius"));
            this.el.setAttribute("position", sphere.getAttribute("position"));
            this.el.sceneEl.addEventListener("loaded", () => {

              setTimeout(() => {
                const mesh = this.el.getObject3D("mesh");
                const axis = sphere.getAttribute("position").clone();
                axis.add(
                  mesh.geometry.boundingSphere.center.clone().multiplyScalar(-1)
                );
                axis.normalize();
                this.el.object3D.translateOnAxis(axis, 0.1);
              }, 200);
            });
          },
      });
  </script>

<a-scene>
  <a-assets>
    <img
       id="15Anim"
       crossorigin="anonymous"
       src="https://cdn.glitch.global/1e9da372-6263-4de8-9156-5eb917844f9b/15-Unit.png"
     />
    <a-mixin
      id="anim"
      material="shader:flat; side: double; transparent:true; opacity:0.3; alphaTest:0.1"
      match-sphere="target: #foo"
      click-sphere
      rotation='0 180 0'
      radius='2.8' 
     ></a-mixin>
  </a-assets>
  
  <a-entity id="group" rotation="0 222 0" position="0 -55 0" scale="20 20 20">
     <a-sphere 
        id='foo' 
        position="0 0 0" 
        radius='4.05' 
        theta-length="90"ength="90" 
        material='color: #59A1FF; shader: flat; side: double; opacity:0.7; transparent:false; wireframe:false;'>
      </a-sphere>

     <a-sphere  
       mixin="anim" 
       class="cantap" 
       material='src: #15Anim' 
       sprite-sheet="cols:5; rows: 10; progress: 0.;" 
       geometry='phiLength: 53; thetaLength: 26; thetaStart: 25; phiStart:200'>
    </a-sphere>
  </a-entity>
</a-scene>

Resultant reference:

Tried changing the repeat values from -1 to 1 and 0. Changing the rotation moves the image in a different position. Setting alphatest to 0 does not affect the mirrored image.

Solution

This was solved by using a mirrored sprite sheet such that it looks right when applied as the curved texture. This is more like a hack and has not been solved using proper coding.