在react-hook中使用回调的多个调度？

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [callbacks, setCallbacks] = useState([]);

  useEffect(() => {
    callbacks.forEach(callback => callback());
  }, [callbacks]);

  const addCallback = callback => {
    setCallbacks(prevCallbacks => [...prevCallbacks, callback]);
  };

  return (
    <div>
      <button onClick={() => addCallback(() => console.log('Callback 1'))}>
        Add Callback 1
      </button>
      <button onClick={() => addCallback(() => console.log('Callback 2'))}>
        Add Callback 2
      </button>
    </div>
  );
}

export default MyComponent;