I am using React native and nodejs. I query the dates and throw them into an array state.

The second step taken was to copy some code from an article that proved to be useful to map over the array of dates and send it to an empty object.

 let markedDay = {};

    datesArray.map((item) => {
      markedDay[item.date] = {
        marked: true,
        selectedColor: 'red', // DOES NOT WORK ALSO
        color: 'red',
      };
    });

Bellow is the whole component code

const CalendarScreen = ({navigation}) => {

    const [datesArray, setDatesArray] = useState([]);


    // get all days from this specific user
    const handleAllDay = async () => {
        try 
        {
            const u = await AsyncStorage.getItem('user');
            const parsed = JSON.parse(u);
            const dayArray = await data.get('/api/get-all-days/' + parsed.userID);
            setDatesArray(dayArray.data);
        } 
        
        catch (error) 
        {
            console.log(error);
        }
    };


    let markedDay = {};

    datesArray.map((item) => {
      markedDay[item.date] = {
        marked: true,
        selectedColor: 'red',
        color: 'red',
      };
    });
  

    useEffect(() => {
        handleAllDay();
    }, []);

     //Component
    return (
        <View>
            {/* calendar */}
            <View style={styles.calendarView}>
                <Title title='Calendar activities' />
                <Text style={styles.headerText}>Add or create exercices here</Text>
            </View>

            {/* calendar wrapper */}
            <View style={styles.calendarWrapper}>
                <Calendar 
                    onDayPress={day => addNewDay(day, navigation)} 
                    markedDates={markedDay}
                />
                {/* WarningBox */}
                <WarningBox>The workout days created will appear marked by a blue dot once you log in again.</WarningBox>
            </View>

            
            
        </View>
    )
};

const styles = StyleSheet.create({
    calendarWrapper: {
        paddingHorizontal: 20,
        display: 'flex',
        height: 420,
        justifyContent: 'space-around',
        gap: 20
    },

    headerText: {
        marginTop: 10,
        color: Colors.darkGreen
    },

    calendarView: {
        padding: 20
    }
});

export default CalendarScreen;

Once pressed to on a day, there is a modal that will execute a CreateNewDay function and navigate to a new Screen that will create that day.. After creating the day, if navigate back to calendar view, the day is not marked. I must log out and in again to see the changes...

Can anyone help me?> Thanks , Daniel