Patterns from react-native-svg not rendering correctly in React Native

Question

I am facing issue with SVG Patterns while working on React Native project. I have used react-native-svg library for SVGs. When using patterns, it's not rendering at all or just getting default black fill. Below is the code I am using, can anyone help in rectifying this?

<Svg style={styles.character} height={400}>
  <Defs>
    <ClipPath id='characterClip'>
      <SvgText
        textAnchor='middle'
        x={'50%'}
        y={400}
        fontFamily={Styles.secondaryFont}
        fontSize={340}
        fill={"white"}
        strokeWidth={1.2}
        strokeDasharray={8}
        stroke={"black"}>{route.params.character}</SvgText>
    </ClipPath>
    <Pattern
      id="#star"
      viewBox='0 0 10 10'
      width={'10%'} 
      height={'10%'}
      patternUnits='userSpaceOnUse'
    >
      <Circle r={15} stroke={"blue"} strokeWidth={3} fill={'none'}/>
    </Pattern>
  </Defs>
  <SvgText
    onMoveShouldSetResponder={(event) =>true}
    onResponderMove={handleGesture}
    clipPath='#characterClip'
    translateY={_translateY}
    textAnchor='middle'
    x={"50%"}
    y={400}
    fontFamily={Styles.secondaryFont}
    fontSize={340}
    fill={"white"}
    strokeWidth={2}
    strokeDasharray={8}
    stroke={"black"}>{route.params.character}</SvgText>

    <G clipPath='#characterClip'
      translateY={_translateY}
      textAnchor='middle'
    >
      <Circle cx={"50%"} cy={400} r={40} fill={"url(#star)"}/>
    </G>
    <Circle cx={"50%"} cy={400} r={40} strokeWidth={15} fill={"none"} stroke={"url(#star)"}/>
</Svg>

Issue Snapshot : issue with the black circle in between the character issue with the black circle in between the character

It should something like this