我有一个有子组件的组件，我想用不同的ID呈现这些子组件。它们正在从存储中获取数据。问题是它们被呈现了，但具有相同的项。如何解决这个问题？

多图像组件

const MultiImages: () => JSX.Element = () => {
  const values = ['500', '406', '614'];

  return ( 
      <div>
        {values.map((val, index) => {
          return <OneImage key={index} projectID={val} />;
        })}
      </div>
  );
};

export default MultiImages;

一个映像组件

const OneImage: () => JSX.Element = ({ projectID }) => {
  const projectData = useProjectDataStore();
  const { getProject } = useAction();
  useEffect(() => {
    getProject(projectID ?? '');
  }, []);

  return (
    <>
      <div> 
            <img
              src={projectData.picture}
              }
            />
          <div>
            <a>
              {projectData.projectName}
            </a>
          </div>
      </div>
    </>
  );
};

export default OneImage;