Image showing out of Mask when applying shader

Hello guys. I'm having a problem with a shader for UI images.

I'm using a scrolling view with a mask, and at some point, I want the images to be in a GreyScale (basically to show the player those units are still locked). I have no experience regarding shaders, so I google a GeryScale shader and implemented it. The problem is that, when I apply that GreyScale Shader to the UI images inside the scrolling view, they ignore the mask completely.

Any one with experience in shaders could give me some hints about what's happening?

Here the the current Shader I'm suing:

 // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'
 
 Shader "Sprites/GrayScale4"
 {
     Properties
     {
         [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
         _Color("Tint", Color) = (1,1,1,1)
         [MaterialToggle] PixelSnap("Pixel snap", Float) = 0
         _EffectAmount("Effect Amount", Range(0, 1)) = 1.0
     }
 
         SubShader
         {
             Tags
             {
                 "Queue" = "Transparent"
                 "IgnoreProjector" = "True"
                 "RenderType" = "Transparent"
                 "PreviewType" = "Plane"
                 "CanUseSpriteAtlas" = "True"
             }
             
             Cull Off
             Lighting Off
             ZWrite Off
             Fog { Mode Off }
             Blend SrcAlpha OneMinusSrcAlpha
 
             Pass
             {
             CGPROGRAM
                 #pragma vertex vert
                 #pragma fragment frag
                 #pragma multi_compile DUMMY PIXELSNAP_ON
                 #include "UnityCG.cginc"
 
                 struct appdata_t
                 {
                     float4 vertex   : POSITION;
                     float4 color    : COLOR;
                     float2 texcoord : TEXCOORD0;
                 };
 
                 struct v2f
                 {
                     float4 vertex   : SV_POSITION;
                     fixed4 color : COLOR;
                     half2 texcoord  : TEXCOORD0;
                 };
 
                 fixed4 _Color;
 
                 v2f vert(appdata_t IN)
                 {
                     v2f OUT;
                     OUT.vertex = UnityObjectToClipPos(IN.vertex);
                     OUT.texcoord = IN.texcoord;
                     OUT.color = IN.color * _Color;
                     #ifdef PIXELSNAP_ON
                     OUT.vertex = UnityPixelSnap(OUT.vertex);
                     #endif
 
                     return OUT;
                 }
 
                 sampler2D _MainTex;
                 uniform float _EffectAmount;
 
                 fixed4 frag(v2f IN) : COLOR
                 {
                     half4 texcol = tex2D(_MainTex, IN.texcoord);
                     texcol.rgb = lerp(texcol.rgb, dot(texcol.rgb, float3(0.3, 0.59, 0.11)), _EffectAmount);
                     texcol = texcol * IN.color;
                     return texcol;
                 }
             ENDCG
             }
         }
             Fallback "Sprites/Default"
 }