React js- page fails to get actual state in render - reactjs

Question

I am new to react and having a weird bug in my application. On page load the app checks if user has some subscribed tests, the respective tests are shown or else a error than no test found. Page initially shows no error message and then loads up the test which is weird. Please help
#
export default class PlaytestsIndex extends React.Component {
constructor (props, context) {
super(props, context);
this._onPlaytestStoreChange = this._onPlaytestStoreChange.bind(this);
this.state = {
playtests: PlaytestStore.getActivePlaytests()
};
}
componentDidMount () {
PlaytestStore.addChangeListener(this._onPlaytestStoreChange);
}
componentWillUnmount () {
PlaytestStore.removeChangeListener(this._onPlaytestStoreChange);
}
_onPlaytestStoreChange () {
this.setState({
playtests: PlaytestStore.getActivePlaytests()
});
}
render () {
const playtests = this.state.playtests;
if (playtests.length === 0) {
return (
<table className="table table-fixed content-section">
<tbody>
<tr className="disabled">
<td className="no-results center">No playtests found</td>
</tr>
</tbody>
</table>
);
}
const today = Moment().minute(0).hour(0).second(0).millisecond(0);
// how the groups of playtests are sorted
const sortOrderLabels = [
'Currently Active',
'Upcoming'
];
const timelineDateRows = _.chain(playtests)
.groupBy((playtest) => {
const startsOn = Moment(playtest._startsOnDateTime).minute(0).hour(0).second(0).millisecond(0);
if (today.isAfter(startsOn) || today.isSame(startsOn, 'day')) {
return 0;
}
return 1;
})
.toPairs() // [[idx, playtests], ...]
.sortBy((paired) => paired[0]) // by idx
.map((paired) => {
const [idx, playtests] = paired;
return (<TimelineDateRow key={sortOrderLabels[idx]} label={sortOrderLabels[idx]} playtests={playtests}/>);
})
.value();
return (
<div>
{timelineDateRows}
</div>
);
}
}
#