Как связать между собой текст списка и чекбокс в нем

import React from "react";
class App extends React.Component {
    constructor() {
        super();
        this.state = {arr:[{name:'Петя',index:'1',sost:'none'},{name:'Вася',index:'2',sost:'none'},{name:'Мика',index:'3',sost:'none'},{name:'Вика',index:'4',sost:'none'}],
        textDecoration:'none',indexperel:''
        }}
 
 
    perecherknutitext(event){
alert (Number(event.target.index));
     const list2=this.state.arr.map((item,index)=> {
          if (index===event.target.index) {alert("нашел");}
         //if (this.state.textDecoration === 'none') {
         //  this.setState({textDecoration: "line-through"});
         // })//  this.setState({indexperel: event.target.index})
 
 
     })
 
                // this.setState({textDecoration: "none"});
                // this.setState({indexperel: event.target.index})
 
     }
 
 
 
 
    render(){
        const list=this.state.arr.map((item,index)=>{
            return <React.Fragment>
                <li id={index} style={{textDecoration:this.state.textDecoration}}> {item.name}-{index}
                    <input type="checkbox" onChange={this.perecherknutitext.bind(this)} /></li>
 
 
            </React.Fragment>
 
 
 
        })
        return<div>
        <ul>{list}</ul>
 
 
        </div>;
    }}
 
 
export default App

class App extends React.Component {
  state = {
    arr: [
      { name: "Петя", sost: "none", checked: false },
      { name: "Вася", sost: "none", checked: false },
      { name: "Мика", sost: "none", checked: false },
      { name: "Вика", sost: "none", checked: false },
    ],
  };
 
  handleChange = (index) => () =>
    this.setState((prev) => ({
      arr: Object.assign([], prev.arr, {
        [index]: {
          ...prev.arr[index],
          checked: !prev.arr[index].checked,
        },
      }),
    }));
 
  renderItems = () =>
    this.state.arr.map((item, index) => (
      <li style={{ textDecoration: item.checked ? "line-through" : "none" }}>
        {item.name}-{index}
        <input type="checkbox" onChange={this.handleChange(index)} />
      </li>
    ));
 
  render() {
    return <ul>{this.renderItems()}</ul>;
  }
}

function updateObject(obj, key, updater) {
  return Object.assign([], obj, {
    [key]: {
      ...obj[key],
      checked: updater(obj[key]),
    },
  });
}
 
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      arr: [
        { name: "Петя", sost: "none", checked: false },
        { name: "Вася", sost: "none", checked: false },
        { name: "Мика", sost: "none", checked: false },
        { name: "Вика", sost: "none", checked: false },
      ],
    };
    this.toggle.bind(this);
  }
 
  toggle(index) {
    this.setState((prevState) => ({
      arr: updateObject(prevState.arr, index, (item) => !item.checked),
    }));
  }
 
  render() {
    const items = this.state.arr.map((item, index) => (
      <li style={{ textDecoration: item.checked ? "line-through" : "none" }}>
        {item.name}-{index}
        <input type="checkbox" onChange={() => this.toggle(index)} />
      </li>
    ));
 
    return <ul>{items}</ul>;
  }
}