React Component Delete do not reflect in render method

Question

I am trying to add repetitive components using ReactJs and at the same time I am deleting components and rendering the results. While doing the result seems quite confusing and I might need expert Help, So please Help me understanding and solve the issue.

Let me share my Code:

render() {
const contactComponentList = this.props.transportOperator.contacts.map((object, index) => {
     return (
            <div key={index} ref={"contact_"+index}>
                <MuiThemeProvider muiTheme={muiThemebtn}>
                    <Paper key={index} rounded={false} style={material.addWidgetStyle.paperStyle} zDepth={0}>
                        <div style={material.addWidgetStyle.rowStyle}>
                            <span style={material.addWidgetStyle.titleColumnStyle}>
                                {language.AddTransportText.TransportContactName}*
                            </span>
                            <span style={material.addWidgetStyle.greySpanStyle}>

                                <TextField
                                    id={"name" + index}
                                    ref="name"
                                    hintText={language.AddTransportText.TransportContactName}
                                    type="text"
                                    min="0"
                                    onChange={this.handleTransportOpContactName.bind(this, index)}
                                    underlineStyle={errorTxtName !== '' || errorValName !== '' ? { borderColor: 'red' } : {}}
                                    />
                                <IconButton style={errorTxtName !== '' || errorValName !== '' ? styles.showWarining : styles.hideWarning} 
                                    tooltip={errorTxtName !== '' ? errorTxtName : errorValName}>
                                    <Warning color="red" />
                                </IconButton>
                            </span>
                        </div>
                        <div style={material.addWidgetStyle.rowStyle}>
                            <span style={material.addWidgetStyle.titleColumnStyle}>

                            </span>
                            <span>
                            {index >= 1 ?
                            <IconButton style={styles.leftBtn} iconStyle={styles.leftIcon}
                                tooltip={language.AddDriverText.DeleteTransportOpContact}
                                onClick={this.deleteContactComponent.bind(this,index)}>
                                <ActionDelete color={grey700} />
                            </IconButton>
                            : ''
                            }
                            {(this.props.transportOperator.contacts.length-1 === index) ? 
                            <IconButton 
                                style={styles.leftBtn} iconStyle={styles.leftIcon}
                                tooltip={language.AddDriverText.AddTransportOpContact}
                                onClick={this.addContactComponent}>
                                <ContentAdd color={grey700} />
                            </IconButton>
                            : ''
                            }
                            </span>
                        </div>
                    </Paper>
                </MuiThemeProvider>
            </div>
        )
    });

    return (
        <MuiThemeProvider>
            <div>
                {contactComponentList}
            </div>
        </MuiThemeProvider>
    );
}

The code that adds and deletes the repetitive components is as follows:

addContactComponent(event) {
    tempArray = this.props.transportOperator.contacts;
    tempArray.push({
        'name': '',
    });
    this.props.error.push({
        'errorName': '',
    });
    contacts=tempArray;
    this.setState({ contactComponents: tempArray });
    this.props.transportOperator.contacts=contacts;
    event.currentTarget.style.display = 'none';
}

deleteContactComponent(index,event){
    tempArray.splice(index,1);
    contacts=tempArray;
    this.setState({
        contactComponents: tempArray
    });
    this.props.transportOperator.contacts=contacts;
}

But a strange behavior I am facing is suppose we have 4 contact component added i.e: A,B,C,D and as we are deleting by index from the array, so we delete B. in console.log where I am seeing the remaining values of the array, it shows A,C,D are there, but in UI, I see that the last element is deleted i.e A,B,C is remaining.

I tried everything but could not understand this strange behavior. Please I need a expert help.