如何将列表项的名称传递给另一个组件？

// 源组件
import React, { useState } from 'react';
import TargetComponent from './TargetComponent';

const SourceComponent = () => {
  const [itemName, setItemName] = useState('');

  const handleItemClick = (name) => {
    setItemName(name);
  };

  return (
    <div>
      <ul>
        <li onClick={() => handleItemClick('Item 1')}>Item 1</li>
        <li onClick={() => handleItemClick('Item 2')}>Item 2</li>
        <li onClick={() => handleItemClick('Item 3')}>Item 3</li>
      </ul>
      <TargetComponent itemName={itemName} />
    </div>
  );
};

export default SourceComponent;

// 目标组件
import React from 'react';

const TargetComponent = ({ itemName }) => {
  return (
    <div>
      <h2>Selected Item: {itemName}</h2>
      {/* 其他使用传递过来的列表项名称的操作 */}
    </div>
  );
};

export default TargetComponent;