How to connect two components in a same component created on click of add button

I am creating multiple counters on click and I want to connect the two counters, When I increase the value in the first counter it should automatically decrease in the second counter. Can you suggest any solution where I can communicate with multiple counters as I can generate multiple counters on click?

import React from "react";
import ReactDOM from "react-dom";

const Counter = ({ value, onIncrement, onDecrement, hideIncrement }) => {
  return (
    <div>
      <span>{value}</span>
      {value > 0 && (
        <button
          onClick={() => {
            onDecrement();
          }}
        >
          -
        </button>
      )}
      {hideIncrement === false && value < 10 && (
        <button
          onClick={() => {
            onIncrement();
          }}
        >
          +
        </button>
      )}
    </div>
  );
};

const Counters = () => {
  const [counters, setCounters] = React.useState([4, 0, 0, 5]);

  const sum = counters.reduce((acc, item) => acc + item, 0);

  return (
    <div>
      <p>Sum: {sum}</p>
      <button
        onClick={() => {
          setCounters([...counters, 0]);
        }}
      >
        Add counter
      </button>
      <br />
      <div>
        {counters.map((value, index) => (
          <Counter
            value={value}
            hideIncrement={sum >= 20}
            onIncrement={() => {
              const countersCopy = [...counters];
              countersCopy[index] += 1;
              setCounters(countersCopy);
            }}
            onDecrement={() => {
              const countersCopy = [...counters];
              countersCopy[index] -= 1;
              setCounters(countersCopy);
            }}
          />
        ))}
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<Counters />, rootElement);