如何根据[React TypeScript]接口的数据在两个ui容器之间进行选择

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

interface IData {
  id: number;
  name: string;
}

const App: React.FC = () => {
  const [data, setData] = useState<IData[]>([]);
  const [selectedData, setSelectedData] = useState<IData | null>(null);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    // 使用fetch或其他网络请求库获取接口的数据
    const response = await fetch("https://example.com/api/data");
    const jsonData = await response.json();
    setData(jsonData);
  };

  const handleSelect = (selected: IData) => {
    setSelectedData(selected);
  };

  return (
    <div>
      <div>
        <h2>UI容器1</h2>
        {data.map((item) => (
          <div
            key={item.id}
            onClick={() => handleSelect(item)}
            style={{ background: selectedData === item ? "lightblue" : "white" }}
          >
            {item.name}
          </div>
        ))}
      </div>
      <div>
        <h2>UI容器2</h2>
        {selectedData && <div>{selectedData.name}</div>}
      </div>
    </div>
  );
};

export default App;