React doesn't change list correctly when order of elements change

Question

I have a list below.

import React from 'react';
import { Marker } from 'react-native-maps';
import { useSelector, useDispatch } from 'react-redux';
import { selectPin } from '../reducers/pinReducer';

const Markers = () => {
    const dispatch = useDispatch();
    const pinsAvailable = useSelector(state => state.pin.allTheAvailablePins);

    return (
        <>
            {pinsAvailable.map((pin, index) => {
                console.log(index === 0) // returns true when index is 0
                return <Marker 
                key={pin.id} 
                coordinate={pin.coords}
                pinColor={index === 0 ? "red" : "green"} // but it doesnt work here...
                onPress={() => dispatch(selectPin({pin}))} />
            })}
        </>
    )
}

export default Markers;

At first, pinsAvailable variable gets array of pin objects. And it is rendered fine at first. When the list changes (List doesn't get new elements or there is not something deleted, only order of the list changes.) it doesn't work like how I want.

The issue is, at the first render, it renders first element of lists pinColor property as "red" and rest is rendered as "green". But after first render it renders every elements pinColor as "green".

What I want is knowing why lists first element only renders pinColor property as "red" at first render and why not in other renders. In fact index === 0 returns true. The only thing changes in list is nothing but "order of elements".

EDIT;

I call fetchRoute from somewhere in my code.

export const fetchRoute = async (dispatch, location) => {
    if(location){
        const res = await axios.get(`http://192.168.1.98:3000/api/sevkiyat/rotayiciz?lat=${location.latitude}&lon=${location.longitude}`);
        dispatch(setAllThePinsAvailable({pins: res.data.orderedDeliveries})); // orderedDeliveries is array of reordered pins.
        dispatch(setRoutePath({routePath: res.data.lines}));
    }
}

Below code is a Redux Toolkit slice.

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
    selectedPin: null,
    deliveryToBeArrived: null,
    allTheAvailablePins: [],
    fetchPinsLoading: true,
    fetchPinsError: null,
}

export const pinSlice = createSlice({
    name: 'pin',
    initialState,
    reducers: {
        unselectPin: (state) => {
            state.selectedPin = null;
        },
        selectPin: (state, action) => {
            state.selectedPin = action.payload.pin;
        },
        startDeliveryToBeArrived: (state, action) => {
            state.deliveryToBeArrived = action.payload.delivery;
        },
        abortDeliveryToBeArrived: (state) => {
            state.deliveryToBeArrived = null;
        },
        setAllThePinsAvailable: (state, action) => {
            state.allTheAvailablePins = action.payload.pins;
            state.fetchPinsLoading = false;
        },
        setFetchPinsError: (state, action) => {
            state.fetchPinsError = action.payload.error;
        }
    },
})

export const { setAllThePinsAvailable, selectPin, unselectPin, startDeliveryToBeArrived } = pinSlice.actions

export default pinSlice.reducer;

Below code is main store.

import { configureStore } from '@reduxjs/toolkit';
import locationReducer from '../reducers/locationReducer';
import modalReducer from '../reducers/modalReducer';
import pinReducer from '../reducers/pinReducer';
import routeReducer from '../reducers/routeReducer';
import sampleReducer from '../reducers/sampleReducer'

export const store = configureStore({
    reducer: {
        sample: sampleReducer,
        pin: pinReducer,
        location: locationReducer,
        modal: modalReducer,
        route: routeReducer,
    },
    middleware: getDefaultMiddleware => getDefaultMiddleware({
        serializableCheck: false
    })
})

AN EDIT MORE: It is fixed when I give hex color instead of color name to pinColor. The problems source comes from react-native-maps library.

Answer 1

It is fixed when I give hex color instead of color name to pinColor. The problems source comes from react-native-maps library.

For instance: "#FF0000" instead of "red"