reactjs - 他の要素を削除しようとしているときに、常に最初の要素を削除するのはなぜですか?

Question

選択したコンポーネントを削除し、削除後に検索ボックス内に結果を表示できる関数を作成しようとしています。ただし、他のアイテムを削除すると、常に最初のアイテムも削除されます。

これは、検索ボックス コンポーネントを含む高次コンポーネントです。

export default class Tagsearch extends Component {

  constructor(props) {
    super(props);

    this.state = {
      hitsDisplay:false,
      inputContent:"",
      tags:[]
    };
  }

  handleRemoveItem = (index) => {
    this.setState(state => ({
      tags: state.tags.filter((tag, i) => i !== index)
    }));
  }

  handleSelect = value => {
    this.setState(prevState => ({ 
      tags:[...prevState.tags, value]
    }));
    this.setState({ selected:true })
  }

  openDisplay = () => {
    this.setState({ hitsDisplay: true })
  }

  closeDisplay = () => {
    this.setState({ hitsDisplay: false })
  }

  render() {

    let result = (
      <div className="container-fluid" id="results">

      </div>
    )

    if (this.state.hitsDisplay) {
      result = (
        <Flexbox 
          flexDirection="column" 
          minHeight="100vh"
        >
          <div className="rows">
            <MyHits handleSelect={this.handleSelect}/>
          </div>

        </Flexbox>
      )
    }

  return (
      <InstantSearch
        appId="********"
        apiKey="**************************"
        indexName="tags"
      >
        <CustomSearchBox
          handleRemoveItem={this.handleRemoveItem}
          tags={this.state.tags}
          styles={styles}
          openDisplay={this.openDisplay}
          closeDisplay={this.closeDisplay}
        />
        {result}

      </InstantSearch>
    )
  }
}

検索ボックス コンポーネントのコードは次のとおりです。

import React, { Component } from 'react'
import { connectSearchBox } from 'react-instantsearch-dom';

const CustomSearchBox = ({ currentRefinement, refine, openDisplay, closeDisplay, styles, tags, handleRemoveItem, ...props }) => {
  const handleChange = (e, refine) => {
    const value = e.target.value
    refine(value)
    if (value !== "") {
      openDisplay();
    } else {
      closeDisplay();
    }
  }

  let inputTags = (
    tags.map((tag, i) => 
      <li key={i} style={styles.items}>
        {tag}
        <button
          onClick={() => handleRemoveItem(i)}
        >
          (x)
        </button>
      </li>
    )
  )

  return (
    <label>
      <ul style={styles.container}>
        {inputTags}
        <input
          style={styles.input}
          type="text"
          value={currentRefinement}
          onChange={e => handleChange(e, refine)}
        />
      </ul>
    </label>
  )
}

export default connectSearchBox(CustomSearchBox);

ボタンを押した要素を削除したかっただけです。したがって、3 番目の削除ボタンを押すと、3 番目の要素が削除され、最初の要素が保持されます。

配列を下位レベルのコンポーネントにマップし、ターゲットを上位レベルのコンポーネントに渡します。インデックスの代わりにターゲット自体の名前を渡しても、ターゲットと最初の要素の両方が削除されます。重複する可能性のある質問と比較して、その問題は最後の質問を削除することですが、私の質問は最初の質問とターゲットの質問の両方を削除します。