Vertical time elements not rendering from map function about react-vertical-timeline HOT 10 CLOSED

import React from 'react';
import firebase from './Firebase';
import Cookies from 'universal-cookie';
import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';

import Header from './Header';

export default class LoginPage extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            userID: null,
            profileImgUrl: null,
            name: null,
            isDoneLoadingData: false
        }
        this.progressArray = [];
    }

    componentWillMount(){
        let that = this;
        firebase.auth().onAuthStateChanged(function(user) {
            if (user) {
                let userID = firebase.auth().currentUser.uid;
                console.log(userID);
                let cookies = new Cookies();
                let profileImgUrl = (cookies.get('profileImgUrl',{doNotParse:true}));
                let name = (cookies.get('name',{doNotParse:true}));
                that.setState({userID: userID, profileImgUrl: profileImgUrl, name: name},()=>{
                    console.log(this.state);
                    that.fetchProgressData();
                });
            } else {
              console.log('user not signed in');
              his.props.history.replace('/progress');
            }
        });
    }

    fetchProgressData = () => {
        let ref = firebase.database().ref('users/' + this.state.userID + '/progress')
        ref.on('value', (snapshot)=>{
            console.log(snapshot.val())
            snapshot.forEach((childSnapshot)=>{
                console.log(childSnapshot.val());
                this.progressArray.push(childSnapshot.val());
                this.setState({isDoneLoadingData: true});
            })
        });
       
    }

    constructTimeLine = () =>{
        return(
            this.progressArray.map((object,i) => {
                console.log('test')
                return (
                    <VerticalTimelineElement
                    key={i}
                    style={{visibility:'visible', height:'200px'}}
                    iconStyle={{ background: object.color, color: '#fff' }}
                    date={object.date}
                    position='right'
                    >
                        <div>
                            <div style={{display:'flex'}}>
                                {object.imageUrls.map((url,i)=>{
                                    return(
                                        <img key={i} src={url} style={{width:'50px', height:'50px',marginRight:'5px',borderRadius:'3px'}}></img>
                                    )
                                })
                                }
                            </div>
                            <p style={{color:'green'}}>{object.comments}</p>
                        </div>
                    </VerticalTimelineElement>
                );
            })
        )
    }

    render(){
       return(
            <div>
                <Header
                name={this.state.name}
                imgUrl={this.state.profileImgUrl}
                />
                {this.state.isDoneLoadingData&&
                    <VerticalTimeline>
                        {this.constructTimeLine()}
                    </VerticalTimeline> 
                }
            </div>
       )
    }
}

  _createClass(VerticalTimelineElement, [{
    key: 'onVisibilitySensorChange',
    value: function onVisibilitySensorChange(isVisible) {
      //if (isVisible) {
        this.setState({ visible: true });
      //}
    }
  }, {

    }
    return iconClass;
}

renderTimelineElements() {
    const { apiRes } = this.state;
    apiRes.StaticWorkflowRes.forEach((element, ind) => {
        if (element.reqType === this.props.reqTypeId) {
            element.steps.map((eleMap, ind) => {
                var iconClass = this.getIconClass(eleMap.stepType);
                return (
                <VerticalTimelineElement
                    key={ind}
                    className="vertical-timeline-element"
                    contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                    contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
                    date={`Step ${ind + 1}`}
                    iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
                    icon={<i className={iconClass}
                        style={{
                            'position': 'absolute',
                            'right': '11px',
                            'top': '10px'
                        }}></i>}
                >
                    <div>
                        <h3 className="vertical-timeline-element-title">{eleMap.titleVal}</h3>
                        <h4 className="vertical-timeline-element-subtitle">{eleMap.subtitleVal}</h4>
                        <p>{eleMap.stepDesc}</p>
                    </div>
                </VerticalTimelineElement>
                )
            })
        }
    });
}
render() {
    return (
        <React.Fragment>
            <VerticalTimeline animate={true}>
                {this.renderTimelineElements()}
            </VerticalTimeline>
        </React.Fragment>
    )
}`