Reactjs 在react.map函数中唯一地修改每个元素

我正在尝试为.map函数中的每个组件进行条件渲染，但每当我单击元素中的一个图标时，它们都会发生更改。而不是一个图标改变。有人能帮我确定错误是什么吗

下面是代码

import React, { useState } from 'react';
import { Card, Divider, IconButton } from '@material-ui/core';
import {useFormikContext} from 'formik'
// Icons
import LockOpenTwoToneIcon from '@material-ui/icons/LockOpenTwoTone';
import LockTwoToneIcon from '@material-ui/icons/LockTwoTone';

// components
import PropertyDetailsReview from '../FormReview/PropertyDetailsReview';
import EditPropertyDetails from '../EditForms/EditPropertyDetails';

export default function PropertyDetails() {
  // handles render of display data or edit data
  const [displayEdit, setDisplayEdit] = useState(false);

  const { values } = useFormikContext()
  const properties = values.properties;
  console.log(properties)

 
  return (
    <>
    {values.properties.map((property, index) => (

    <Card className="p-4 mb-4" style={{ marginTop: 30 }}>
      {/* Header */}
      <div
        className="font-size-lg font-weight-bold d-flex justify-content-between"
        style={{ marginBottom: -20 }}>
        <div>Property{index + 1}</div>
        <div style={{ marginTop: -10 }}>
          {!displayEdit ? (
            <IconButton color="primary" onClick={(e) => 
              setDisplayEdit(true)
             
              }>
              <LockTwoToneIcon />
            </IconButton>
          ) : (
              <IconButton color="primary" onClick={(e) => setDisplayEdit(false, e)
                
                }>
                <LockOpenTwoToneIcon />
              </IconButton>
            )}
        </div>
      </div>
      <Divider className="my-4" />

      {/* boolean to display data or edit data  */}
      {displayEdit ? <EditPropertyDetails /> : <PropertyDetailsReview />}
    </Card>
    ))}
    </>
  );
}

import React，{useState}来自“React”；
从“@material ui/core”导入{Card，Divider，IconButton}；
从“formik”导入{useFormikContext}
//图标
从“@material ui/icons/LockOpenTwoTone”导入LockOpenTwoToneIcon；
从“@material ui/icons/locktowoneicon”导入locktowoneicon；
//组成部分
从“../FormReview/PropertyDetailsView”导入PropertyDetailsView；
从“../EditForms/EditPropertyDetails”导入EditPropertyDetails；
导出默认函数PropertyDetails（）{
//处理显示数据或编辑数据的渲染
const[displayEdit，setDisplayEdit]=useState（false）；
常量{values}=useFormikContext（）
常量属性=values.properties；
console.log（属性）
返回(
{values.properties.map（（属性，索引）=>(
{/*头*/}
属性{index+1}
{！显示编辑(
setDisplayEdit（真）
}>
) : (
setDisplayEdit（假，e）
}>
)}
{/*布尔值以显示数据或编辑数据*/}
{displayEdit？：}
))}
);
}