Linear Gradient not working on react pdf applied to stroke attribute

Question

I have getting issue when using LinearGradinat on react-pdf with stroke attribute

Here is a sample piece of react-pdf to demonstrate the problem

<Svg width="100%" height="100%" viewBox="0 0 42 42">
       <Defs>
          <LinearGradient id="myGradient" x1="90%" y1="95%" x2="0%" y2="30%">
            <Stop offset="0%" stopColor="blue" stopOpacity="1" />
            <Stop offset="100%" stopColor="red" />
          </LinearGradient>
      </Defs>

    <Circle cx="19" r="15.91549431" cy="23" fill="#eaeaea" stroke="#fff" strokeWidth="6"/>
    <Circle 
       transform="rotate(90, 21, 21)" cx="23" r="15.91549431" cy="-19"
       strokeLinecap="round" fill="none" stroke="url('#myGradient')" 
       strokeWidth="2" strokeDasharray={`60, 40`} 
    />
    <G><Text x="19" y="23" dominantBaseline="middle" textAnchor="middle" fill="red">6</Text></G></Svg>

I have a need to achieve a display with a circle with a text score in it (number 1 to 10) Then around that circle.