Реагирует на ошибку флажка типа ввода со стилем css

Question

У меня есть таблица, которая создает себя с помощью .map (). Каждый объект в массиве состояний отображается в строке таблицы с флажком, который изменяет значение состояния, и тремя кнопками. У меня было слишком много проблем со стилем чекбокса, но я понял, что теперь работает только первый чекбокс. Другие флажки ниже можно щелкнуть, но только первый из них будет окрашен. Кроме того, только в первом флажке функция onChange работает, а не в других. Итак, мне нужно, чтобы функция и изменение цвета работали на всех флажках, а не только на первом.

Список кодов

class ProductList extends React.Component {
    render() { 
        const products = this.props.products;
        return (
            <div className="productList">
                <table className="productTable">
                    <tr>
                        <th className="text-left">Name</th>
                        <th className="text-right">EAN Code</th>
                        <th className="text-right">Type</th>
                        <th className="text-right">Weight</th>
                        <th className="text-right">Color</th>
                        <th className="text-center">Active</th>
                    </tr>
                    {products.map((product, index) => {
                        return (
                            <tr key={index}>
                                <td className="text-left">{product.name}</td>
                                <td className="text-right">{product.ean}</td>
                                <td className="text-right">{product.type}</td>
                                <td className="text-right">{product.weight}</td>
                                <td className="text-right">{product.color}</td>
                                <td className="text-center">
                                <input type="checkbox" id="check" checked={product.active} onChange={(e) => this.props.setProductActive(product, e.target.checked)} />
                                <label for="check" /></td>
                                <td className="text-center"><Link to={{ pathname: "/view", state: { prodIndex: index }}} ><button>View</button></Link></td>
                                <td className="text-center"><Link to={{ pathname: "/edit", state: { prodIndex: index }}} ><button>Edit</button></Link></td>
                                <td className="text-center"><button onClick={() => this.props.deleteProduct(index)}>Delete</button></td>
                            </tr>
                        )
                    })}
                </table>
            </div>
        )
    }
}

Стиль

}
input[type=checkbox] + label{
    display: block;
    margin: 2%;
    cursor: pointer;
}
input[type=checkbox]{
    display: none;
}
input[type=checkbox] + label:before {
    content:"";
    border: 2px solid cornflowerblue;
    border-radius: 10%;
    display: inline-block;
    width: 2rem;
    height: 2rem;
}
input[type=checkbox] + label:active:before{
    transform:scale(0);
}
input[type=checkbox]:checked + label:before{
    background-color: cornflowerblue;
    color: white;
    border-color: cornflowerblue;
}

Приложение Код

import React from 'react';
import './App.css';
import ProductList from "../ProductList/ProductList";
import NewProd from "../NewProd/NewProd";
import ViewProd from "../ViewProd/ViewProd";
import EditProd from "../EditProd/EditProd";
import {BrowserRouter, Route, Redirect, Link} from "react-router-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
            redirect: false,
            name: "", 
            ean: "", 
            type: "", 
            weight: "", 
            color: "", 
            active: false,
            products: [{name: "Cabbage", ean: "00000000", type: "Vegetable", weight: "2kg", color: "Green", active: false}, 
            {name: "Banana", ean: "111111111", type: "Fruit", weight: "0.3kg", color: "Yellow", active: false}, 
            {name: "Chocolate", ean: "22222222222", type: "Candy", weight: "0.2kg", color: "Brown", active: false}, 
            {name: "Orange", ean: "3333333333", type: "Fruit", weight: "0.5kg", color: "Orange", active: false}, 
            {name: "Cucumber", ean: "4444444444", type: "Vegetable", weight: "1kg", color: "Green", active: false}, ]
    };
};
/*componentDidMount() {
  let localData = JSON.parse(localStorage.getItem("products"));
  console.log(localData);
  this.setState({products: localData})
}
setToLocalStorage() {
  localStorage.setItem("products", JSON.stringify(this.state.products));
}*/
handleFormSubmit = (e) => {
  if (!this.canBeSubmitted()) {
    e.preventDefault();
    return alert("Please fill all empty text spaces");
  } 
  e.preventDefault();
  let products = [...this.state.products];
  products.push({
      name: this.state.name,
      ean: this.state.ean,
      type: this.state.type,
      weight: this.state.weight,
      color: this.state.color,
      active: false,
  });
  this.setState({ redirect: true, products, 
    name: "", ean: "", type: "", weight: "", color: "", active: false},
    () => {this.setState({redirect: false})}
  );
}
handleEditFormSubmit = (index, e) => {
  if (!this.canBeSubmitted()) {
    e.preventDefault();
    return alert("Please fill all empty text spaces");
  } 
  e.preventDefault();
  let products = [...this.state.products];
  products.splice(index, 1, {name: this.state.name,
    ean: this.state.ean,
    type: this.state.type,
    weight: this.state.weight,
    color: this.state.color,
    active: false})
  this.setState({ redirect: true, products, name: "", ean: "", type: "", weight: "", color: "", active: false}, 
  () => this.setState({redirect: false})
  );
  }
canBeSubmitted() {
  const {name, ean, type, weight, color} = this.state;
  return (name.length > 0 && 
    ean.length > 0 && 
    type.length > 0 && 
    weight.length > 0 && 
    color.length > 0
  )
}
handleInputChange = (e) => {
    this.setState({...this.state,
    [e.target.name]: e.target.value})
  };

deleteProduct = (delIndex) => {
  let products = [...this.state.products].filter((product, index) => index !== delIndex);
  this.setState({ products }/*,
    () => this.setToLocalStorage());*/
};
isActive = () => {
  this.setState({active: !this.state.active})
}
setProductActive = (product, active) => {
  this.setState((state) => ({
    products: state.products.map(p => p.name === product.name ? { ...p, active } : p)
  }));
}

render() {
  return (
    <BrowserRouter>
    <div className="App">
      <ProductList products={this.state.products} 
      deleteProduct={this.deleteProduct}
      setProductActive={this.setProductActive} />
      <Link to={{ pathname: "/create"}} ><button>Create</button></Link>
      <Route path="/create" render={(props) => <NewProd {...props} 
      products = {this.state.products}
      redirect = {this.state.redirect}
      handleFormSubmit={this.handleFormSubmit}
      handleInputChange={this.handleInputChange}
      newName={this.state.name}
      newEan={this.state.ean}
      newType={this.state.type}
      newWeight={this.state.weight}
      newColor={this.state.color} />} />
      <Route path="/view" render={(props) => <ViewProd {...props} products={this.state.products} />} />
      <Route path="/edit" render={(props) => <EditProd {...props} products={this.state.products} 
      handleInputChange={this.handleInputChange}
      handleEditFormSubmit={this.handleEditFormSubmit}
      editName={this.state.name}
      editEan={this.state.ean}
      editType={this.state.type}
      editWeight={this.state.weight}
      editColor={this.state.color}
  redirect={this.state.redirect} />} /> 
    </div>
    </BrowserRouter>
  );
  }
}

export default App;