Clusters doesn't shown in iOS simulator.

[SERCHAT]

I show clustered pins using this amazing library. However, pins and clusters do not appear in the iOS simulator. I use an image in static png format for pins. On the Android side, it works properly both in the simulator and on the real device. However, it does not work properly in the iOS simulator.
When I clicked on the location where the invisible pins were located, I noticed that the onPress event of the pins was running. I wonder if my pins are not visible because of the png format?

react native version : 0.73.6
@rnmapbox/maps: 10.1.24

I am copying the code logic I used for clusters below. I'm sure the data source is loaded properly, I just can't view the pins and clusters.

.
.
.
.

return (
        <>
            {clusteredItems !== null && (
                <MapboxGL.ShapeSource
                    ref={shapeSource}
                    id="symbolLocationSource"
                    hitbox={{ width: 0, height: 0 }}
                    onPress={async (point: any) => {
                        if (point.features[0].properties.cluster) {
                            const collection = await shapeSource?.current?.getClusterLeaves(
                                point.features[0],
                                point.features[0].properties.point_count,
                                0,
                            )
                            // Do what you want if the user clicks the cluster
                            await onClusterPress(collection)

                        } else {
                            // Do what you want if the user clicks individual marker
                            await onMarkerPress(point.features[0])
                        }
                    }}
                    shape={clusteredItems ?? undefined}
                    clusterRadius={50}
                    clusterMaxZoomLevel={12}
                    cluster
                >
                    <MapboxGL.SymbolLayer
                        id="pointCount"
                        style={{
                            textField: '{point_count}',
                            textSize: 17,
                            textPitchAlignment: 'map',
                        }}
                    />

                    <MapboxGL.CircleLayer
                        id="clusteredPoints"
                        belowLayerID="pointCount"
                        filter={['has', 'point_count']}
                        style={{
                            circlePitchAlignment: 'map',
                            circleColor: '#ffffff',
                            circleRadius: [
                                'step',
                                ['get', 'point_count'],
                                20,
                                100,
                                25,
                                250,
                                30,
                                750,
                                40,
                            ],
                            circleOpacity: 1,
                            circleStrokeWidth: 1,
                            circleStrokeColor: '#60E6A6',
                        }}
                    />

                    <MapboxGL.Images images={{ pin: { uri: 'pin' } }} />
                    <MapboxGL.SymbolLayer
                        id="singlePoint"
                        filter={['!', ['has', 'point_count']]}
                        style={{
                            iconImage: 'pin',
                            iconSize: Platform.OS === 'android' ? 0.05 : 0.18,
                            iconAllowOverlap: true
                        }}
                    />
                    {/* {
                        props.children
                    } */}
                </MapboxGL.ShapeSource>
            )}

            {/* {
                clusteredItems === null && (
                    props.children
                )
            } */}
        </>

    );