Nested svg content is rendered twice

This is a wired and annoying bug. When using a svg nested into another svg component, the content of nested svg has been drawn twice for no reason. The more strange thing with it is that one of them has drawn without respect to its parent properties (like width, height, x, y, …). My code is very complex, so I provide a simple code to reproduce the problem.

<Svg width={100} height={100} viewBox={'0 0 100 100'}>
    <G key={'item touch zone'} onPress={() => {}} x={20} y={10}>
        <Svg
             key="item"
             width={"100%"}
             height={"100%"}
        >
             <Circle key="circle" cx="7" cy="10" r="8" fill={'green'}/>
         </Svg>
     </G>
</Svg>

here is the result, the right circle is what I really draw, the left one is drawn by itself!!!

I’m using version 8.0.10 (the latest one so far)

[msand]

@SaeedZhiany @ReggaePanda Think I managed to replicate and fix this. Can you test with v9.2.3?

[react-cat]

@msand Had a similar problem, I have nested circles and in case I render more than one instance of my class with svg, some additional circles appeared.

<SvgTradeIcon diameter={25} connotation={"negative"} direction={"up"} />
<SvgTradeIcon diameter={60} connotation={"negative"} direction={"up"} />
<SvgTradeIcon diameter={80} connotation={"negative"} direction={"up"} />

A solution was to add random Ids generated by simple Math.random() to Defs:

<Svg height={diameter} width={diameter}>
    <Defs>
        <RadialGradient
            id={`radialGrad${randomId}`}
            ...
        >
           ...
        </RadialGradient>
        <LinearGradient id={`linearGrad${randomId}`} x1="0" y1="0" x2="0" y2="0.8">
            ...
        </LinearGradient>
    </Defs>
    <Circle ... fill={`url(#radialGrad${randomId})`}/>
    <Circle ... fill={`url(#linearGrad${randomId})`} />
</Svg>

Hope that it would help someone with similar situation.