React, identify rendered component inside different tables

Question

I have a component like this one:

    const DeliverSelector = ({ onUpdate }) => {
      const [value, setValue] = useState(0);
    
      useEffect(() => {
        onUpdate(value);
      }, [value]);
    
      const handleMinus = () => {
        if (value > 0) {
          setValue(value - 1);
        }
      };
    
      const handlePlus = () => {
        setValue(value + 1);
      };
    
      return (<Row>
        <Col onClick={() => handleMinus(value)}>-</Col>
        <Col>{value}</Col>
        <Col onClick={() => handlePlus(value)}>+</Col>
      </Row>);
    };

And a parent component that use DeliverSelector inside different tables (from Ant Design 3):

    // inside the return() I have:

    {headerForTables.map((head, index) => (
      <Table
        dataSource={data}

The key here is data which is a state value set in a handle function which execute this code:

    const handleClick = (value) => {
    // some code
      setData([
        ...data,
        {
          id: position,
          selector: <DeliverSelector
            key={'selector'}
            onUpdate={(value) => handleUpdate(value)}
          />
        }
      ]);
    }

As you can see DeliverSelector has no key or id that makes a different between each component that is rendered. How could I add a key or id in order to identify each DeliverSelector component, and in that way, I can relate each value from the componente with the header name of the table where is rendered?

The full code (not a fiddle working, just the copy-pasted code) of the parent component is here in case you want to look the rest of code, but it's a lot: https://jsfiddle.net/pmiranda/La2uk5z3/

By the way, I made a way to identify on which row of the table is the componente rendered (using a data length) but my problem is to identify the column name, with those 2 values all my work is done.

Any idea, comment, tip, thanks in advance.