Component wont render from mapStateToProps - reactjs

Question

I am using the events calendar package, https://www.npmjs.com/package/react-native-events-calendar, I am trying to display the EventsCalendar component with events coming from redux.
events={fetchEvents[selected].dots} is an array but the component will not render, however if I copy the array directly into the component it renders.
Any ideas why my component won't render?
import React, { Component } from "react";
import { connect } from "react-redux";
import {
Text,
View,
StyleSheet,
Image,
Dimensions,
ActivityIndicator
} from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import * as helpers from "../../helpers";
import {
fetchEvents,
changeMonth,
eventsForAgendaMonth
} from "../../actions/events";
import CustomHeader from "../../navigation/CustomHeader";
import XDate from "xdate";
import AgendaItem from "./AgendaItem";
import AgendaDay from "./AgendaDay";
import EventCalendar from "./DayView";
import propTypes from "prop-types";
class AgendaScreen extends Component {
static navigationOptions = {
title: "",
header: <CustomHeader />
};
constructor(props) {
super(props);
this._eventTapped = this._eventTapped.bind(this);
this.dateChanged = this.dateChanged.bind(this);
this.renderEvent = this.renderEvent.bind(this);
}
dateChanged(date) {
const { eventsForYear, eventsMonth } = this.props;
this.setState({ selectedDay: date });
this.props.dispatch(eventsForAgendaMonth(eventsForYear, date));
}
_eventTapped(event) {
alert(JSON.stringify(event));
}
loadItems(day) {
const { eventsForYear } = this.props;
this.props.dispatch(eventsForAgendaMonth(eventsForYear, day));
}
renderEvent(event) {
console.log("event", event);
return <AgendaItem {...event} />;
}
render() {
const {
fetchEvents,
navigation: {
state: {
params: {
day: { dateString: selected }
}
}
}
} = this.props;
const currentDate = helpers.currentDate;
let { width } = Dimensions.get("window");
return (
<View style={{ flex: 1 }}>
<EventCalendar
eventTapped={this._eventTapped.bind(this)}
events={fetchEvents[selected].dots}
width={width}
initDate={selected}
/>
</View>
);
}
}
const mapStateToProps = state => {
return {
fetchEvents: state.fetchEvents
};
};
export default connect(mapStateToProps)(AgendaScreen);
AgendaScreen.propTypes = {
eventsMonth: propTypes.object,
eventsForYear: propTypes.object
};
const styles = {
container: {
backgroundColor: "#00000000"
},
event: {
backgroundColor: "#00000000",
borderColor: "#DDE5FD",
borderWidth: 0,
borderRadius: 0,
paddingTop: 3,
paddingBottom: 2
},
header: {
height: 30,
paddingHorizontal: 30
},
headerText: {}
};
AFAIK I am not mutating state, I am createing a new object with my reducer:
case "EVENTS_SUCCESS":
const events = {};
const filteredEvents = action.data
.filter(event => {
if (
event.status === "cancelled" ||
!event.start.dateTime ||
helpers.checkDate(event.start.dateTime)
) {
return false;
}
return true;
})
.sort((a, b) => a.startTimeString - b.startTimeString);
filteredEvents.map(event => {
const {
start: { dateTime: startTime },
end: { dateTime: endTime },
summary,
id
} = event;
const sDate = new Date(startTime);
const eDate = new Date(endTime);
const startHour = sDate.getHours();
const startMinute = sDate.getMinutes();
const startDate =
sDate.getFullYear() +
"-" +
("0" + (sDate.getMonth() + 1)).slice(-2) +
"-" +
("0" + sDate.getDate()).slice(-2);
const endHour = eDate.getHours();
const endMinute = eDate.getMinutes();
const endDay = eDate.getDay();
const endMonth = eDate.getMonth();
const endYear = eDate.getFullYear();
const eventStartTime = `${startHour}-${startMinute}`;
const eventEndTime = `${endHour}-${endMinute}`;
let newEvent = {
title: summary,
summary,
id,
eventStartTime,
eventEndTime
};
events[startDate] = events[startDate] || { dots: [] };
const dotsEvents = [...events[startDate].dots, newEvent];
dotsEvents.sort(
(a, b) => a.startTimeString - b.startTimeString
);
events[startDate] = {
dots: dotsEvents,
disabled: false,
selected: true,
selectedColor: "#00CCCB",
customStyles: {
text: {
marginTop: 3
}
}
};
});
return {
...events
};