реагировать на отправку useReducer

Question

У меня есть класс Counter для подсчета значений, и у этого класса есть два метода, вызываемых в c и de c, которые используются для подсчета. Я хочу создать компонент ввода с именем CounterEdit и подключить свойство value к экземпляру класса Counter. Я хочу, чтобы значение обновления входного компонента было изменено при изменении значения счетчика класса счетчика. Для этого я создаю новую функцию-перехватчик с именем useCounter, и эта функция сама по себе использует useReducer и передаю диспетчерскую функцию useReducer классу Counter. Класс счетчика увеличивает или уменьшает значение самого себя и использует функцию отправки для отправки значения счетчика редуктору. Компонент ввода обновляется при изменении статуса редуктора. Но если я использую более одного компонента ввода, обновляется только последний компонент ввода. По остальным изменений нет. Я жду вашей помощи, где я ошибаюсь. Спасибо ...

class Counter { 
    constructor() {
      this.value = 0;
    } 

    setValue(data) {
      this.dispatch({ type: "VALUE_CHANGE", payload: data });}
    
      inc() {
        this.setValue(this.value++);
      }

      dec() {
        this.setValue(this.value--);
      }
    }
    
    export { Counter };

и теперь я хочу использовать редуктор в компонент класса с этим

const reducer = (state, action) => {
  switch (action.type) {
    case "VALUE_CHANGE": {
      return { count: action.payload };
    }

    default:
      return;
  }
};

const initialState = { count: 0 };


const useCounter = counterComp => {
  const [state, dispatch] = useReducer(reducer, initialState);


  useEffect(() => {
    if (counterComp) {
      counterComp.dispatch= dispatch;
    }
  }, [counterComp]);

  return state;
};

, и здесь мой входной компонент получает значение от редуктора:

const CounterEdit = props => {
  const state = useCounter(props.counter);

  return <input type="text" value={state.count} />;
};

когда я запускаю это приложение, меняю только третье входное значение. Я хочу отразить значение счетчика для всех экземпляров ввода.

Содержимое приложения:

    export default function App() {

    //counter class instance
        const testCounter = new Counter();
    
          return (
            <div className="App">
              <div className="header">
                <button  onClick={() => testCounter.inc()}> Inc </button>
                <button onClick={() => testCounter.dec()}>  Dec </button>
              </div>
              <div>
                <CounterEdit counter={testCounter} />
                <CounterEdit counter={testCounter} />
                <CounterEdit counter={testCounter} />
              </div>
            </div>
          );
        }