Почему удаляется последний элемент из массива в state?

import React from 'react'
import { AnswerInput } from '../AnswerInput/AnswerInput'

class QuestionInput extends React.Component {
	state = {
		answers: []
	}

	removeAnswerHandler = index => {
		this.state.answers.splice(index, 1)
		this.setState({
			answers: this.state.answers
		})
	}

	addAnswerInputHandler = () => {
		this.setState({
			answers: [
				...this.state.answers,
				<AnswerInput removeAnswerHandler={this.removeAnswerHandler} />
			]
		})
	}

	render() {
		return (
			<div>
				{this.state.answers.map((item, index) => (
					<div key={index}>{item}</div>
				))}
				<div className="mt-3 mb-3 ml-2">
					<p className="link  text-secondary">
						<i
							className="fas fa-plus"
							onClick={() => this.addAnswerInputHandler()}
						/>
					</p>
				</div>
			</div>
		)
	}
}

export default QuestionInput

import React from 'react'
import { Input } from 'reactstrap'

export class AnswerInput extends React.Component {
	render() {
		return (
			<div className="d-flex align-items-center">
				<Input
					className="answerinput"
					placeholder="Ответ клиента"
					defaultValue=""
				/>
				<i
					className="far fa-trash-alt link ml-2 mr-2 text-secondary"
					onClick={index => {
						this.props.removeAnswerHandler(index)
					}}
				/>
				<i className="far link ml-2 mr-2 fa-copy text-secondary" />
			</div>
		)
	}
}