React Native - different behavior when turn on debugger (React Developer Tools) - react-native

Question

I have a wheel that has 8 arcs, when I turn on debugger the arcs rendered correctly:
But when I turn the debugger off, the arcs position is just messed up:
I tried to build a release version and still got the wrong result. Here is my code:
import * as d3Shape from 'd3-shape'
import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react'
import {Animated, Dimensions, Image, TouchableOpacity, View} from 'react-native'
import Svg, {G, Path} from 'react-native-svg'
import Images from '~/styles/Images'
import ImageReward from './components/ImageReward'
import {styles} from './styles'
...
const renderPaths = () => {
let paths: any[] = []
for (let i = 0; i < _wheelPaths.length; i++) {
const arc = _wheelPaths[i]
const [x, y] = arc.centroid
const number = arc.value.toString()
paths.push({
index: i,
body: (
<G key={`arc-${i}`}>
<Path d={arc.path} strokeWidth={0} fill={arc.color} />
<G
rotation={angleOffset}
origin={`${x}, ${y}`}
>
{_textRender(x, y, number, i)}
</G>
</G>
),
})
}
paths = paths.sort((a, b) => a.index - b.index)
return paths.map((i) => i.body)
}
...
const _renderSvgWheel = () => {
return (
<View style={styles.container}>
{_renderKnob()}
<Animated.View
style={{...}}>
{props.options.middleImgSource ? (
<Image
source={props.options.middleImgSource}
style={{
position: 'absolute',
width: props.options.innerRadius * 2,
height: props.options.innerRadius * 2,
zIndex: 1,
}}
/>
) : null}
<AnimatedSvg
width={gameScreen}
height={gameScreen}
viewBox={`0 0 ${width} ${width}`}
style={{
transform: [{rotate: `-${angleOffset}deg`}],
margin: 10,
zIndex: 0,
}}>
<G y={width / 2} x={width / 2}>
{renderBulb(_wheelPaths?.length * 2)}
{renderPaths()}
</G>
</AnimatedSvg>
</Animated.View>
</View>
)
}
...
return (
<View style={styles.container}>
<View
style={{
width: width,
justifyContent: 'center',
alignItems: 'center',
}}>
<Animated.View style={styles.content}>{_renderSvgWheel()}</Animated.View>
</View>
{props.options.playButton ? _renderTopToPlay() : null}
</View>
)
As you can see I intended to use paths.sort before return it, just to make sure the index is right, but the problem still there