如何将对象从另一个组件推送到数组？

import React, { useState } from 'react';

const TargetComponent = () => {
  const [data, setData] = useState([]);

  // 将对象推送到数组
  const pushObjectToArray = (object) => {
    setData(prevData => [...prevData, object]);
  };

  return (
    <div>
      <button onClick={() => pushObjectToArray({ name: 'John', age: 25 })}>
        推送对象到数组
      </button>
      <ul>
        {data.map((object, index) => (
          <li key={index}>{object.name}, {object.age}</li>
        ))}
      </ul>
    </div>
  );
};

export default TargetComponent;

import React from 'react';

const SourceComponent = ({ pushObject }) => {
  const handleClick = () => {
    const object = { name: 'Jane', age: 30 };
    pushObject(object);
  };

  return (
    <button onClick={handleClick}>
      推送对象到目标组件
    </button>
  );
};

export default SourceComponent;