AOS offset not working with custom animation

Question

Im using custom animation with AOS But data-aos-offset refuses to work My code:

<svg width={49} height={23} viewBox="0 0 49 23" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          data-aos="cArrowAnimateIn"
          data-aos-offset="300"
          data-aos-delay={300}
          data-aos-easing="ease-out-sine"
          data-aos-mirror="true"
          data-aos-once="true"

          fillRule="evenodd"
          clipRule="evenodd"
          d="M48.781 11.387A34.518 34.518 0 0133.481.451c.06 2.928 1.196 5.976 2.81 9.024H.55v3.586h35.74c-1.555 2.57-2.451 5.558-2.69 9.263 4.422-5.02 9.203-9.024 15.18-10.936z"
          fill="#fff"
          fillOpacity={0.95}
          stroke="white"
          strokeWidth="1"
        />
      </svg>

[data-aos="cArrowAnimateIn"] {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  fill: rgba(255, 255, 255, 0);
  transform: translateX(40px);
  transition-property: stroke-dasharray, fill, stroke-dashoffset, transform;
  transition-delay: 0.3s, 0.8s, 0.5s, 0.3s !important;
  transition-duration: 1s, 3s, 17s, 2s !important;
}

[data-aos="cArrowAnimateIn"].aos-animate {
  stroke-dashoffset: 0;
  transform: translateX(0);
  fill: rgba(255, 255, 255, 1);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
}