Не могу удалить элементы с середины массива в React

import React, { Component } from 'react';
import FontAwesome from 'react-fontawesome';
export default class AddTestItem extends Component {
  constructor(props){
    super(props);
    this.state = {
      answerCount: [],
    }
  }
  render(){
    return(
      <div className="add-test-item">
        <span>{this.props.questionNumber}.</span>
        <input className ="question-input" type="text"/>
        {
          this.state.answerCount.map((item,i)=>{
            return (<div  className="answer-input-wrapper" key={i}><input className ="answer-input" type="text"/><FontAwesome onClick={()=>this.deleteAnswer(i)} name='times' className="icon"/></div>)
          })
        }
        <button onClick={this.addAnswer}>Add answer</button>
      </div>
    )
  }
  //custom methods
  addAnswer = () => {
    this.setState((prevState,props)=>({answerCount: prevState.answerCount.concat("-")}));
  }
  deleteAnswer = (i) => {
    this.setState((prevState)=>({answerCount: prevState.answerCount.filter((item,index)=>(i!=index))}))
  }
}