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

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