React input type checkbox error with css styling

I've got a table, which creates itself with .map(). Each object in state array gets displayed in the table row with checkbox, which changes state value, and three buttons. I've had too much trouble with checkbox styling, but I've got it, however, now only the first checkbox works. Other checkboxes below can be clicked, but only the first one gets colored. Also, only in the first checkbox the onChange function works, not on others. So, I need that the function and color change would work on all checkboxes, not just the first one.

List code

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=} ><button>View</button></Link></td>
                                <td className="text-center"><Link to=} ><button>Edit</button></Link></td>
                                <td className="text-center"><button onClick={() => this.props.deleteProduct(index)}>Delete</button></td>
                            </tr>
                        )
                    })}
                </table>
            </div>
        )
    }
}

Styling

}
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;
}