Reactjs react 无法获取函数的最新参数值

我在Reaction中有一个返回html元素的函数

我正面临着一个奇怪的问题.当我安慰它时，我得到了错误的参数值

export default function App() {
  const [values, setValues] = useState({
    accordion1: [{ id: undefined, value: "" }],
    accordion2: [{ id: undefined, value: "" }]
  });

  const textJSX = (heading) => {
    const key = heading === "Accordion 1" ? "accordion1" : "accordion2";
    return (
      <TextField
        label="Enter Details"
        placeholder="Name, date and quote"
        size="small"
        fullWidth
        onChange={(e) => {
          console.log("key", key, heading);
          const temp = { ...values };
          temp[key] = [{ ...temp[key]?.[0], value: e.target.value }];
          setValues(temp);
        }}
        value={values?.[key]?.[0]?.value || ""}
      />
    );
  };

  const customImageJSX = (heading) => {
    const key = heading === "Accordion 1" ? "accordion1" : "accordion2";
    return (
      <div className="flex flex-col">
        {values[key]?.[0].id ? (
          <img className="h-12 w-12" src={values[key]?.[0].id} />
        ) : (
          <label htmlFor="attachment-button-file">
            <input
              className="hidden"
              id="attachment-button-file"
              // type="file"
              onClick={(e) => {
                console.log("key", key, heading);
                const temp = { ...values };
                temp[key] = [
                  {
                    ...(temp[key][0] || {}),
                    id: imgData
                  }
                ];
                setValues(temp);
              }}
            />
            <CloudUploadOutlinedIcon fontSize="large" />
          </label>
        )}
      </div>
    );
  };

  const acc = (options) => {
    const {
      defaultExpanded,
      heading,
      title1 = "Notes",
      title2 = "Image Load"
    } = options;
    return (
      <Accordion defaultExpanded={defaultExpanded}>
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography
            color="InfoText"
            variant="h6"
            className="font-semibold"
            style={{ marginTop: "-10px" }}
          >
            {heading}
          </Typography>
        </AccordionSummary>
        <AccordionDetails style={{ marginTop: "-30px" }} className="">
          <Typography
            color="textSecondary"
            variant="body1"
            className="font-semibold text-lg mb-5 mt-10"
          >
            {title1}
          </Typography>
          {textJSX(heading)}

          <Typography
            color="textSecondary"
            variant="body1"
            className="font-semibold text-lg mb-5 mt-10"
          >
            {title2}
          </Typography>

          {customImageJSX(heading)}
        </AccordionDetails>
      </Accordion>
    );
  };

  return (
    <div className="App">
      {acc({ heading: "Accordion 1" })}
      {acc({ heading: "Accordion 2" })}
    </div>
  );
}

在这里，我用不同的标题调用acc函数两次.根据参数，我将决定需要存储在哪个对象中

当我在第二功能中做一些事情时(手风琴) 例如.在文本字段中，该文本字段位于extJSX中，它提供了正确的参数.但是如果我刺激图像加载，我得到的是第一个参数值，虽然我是在第二个函数(Accordion)中执行的，结果是图像在Accordion 1中显示，但预计在Accordion 2中显示

I have uploaded the above code in code sandbox. https://codesandbox.io/s/accordin-file-attachment-m86lwg.

记住在手风琴2中添加文本和图像，以查看我提到的问题

如有任何帮助，将不胜感激