React-依赖于另一个状态的状态值无法更新

复制步骤

1. 进入Codesandbox控制台后,您可以看到 typeA 和 allTypes 。
   
2. 点击“更新类型A”按钮
3. 在控制台中,您可以看到的更新值 A类 和 所有类型 。
   

预期行为
在里面 所有类型 ,字段的值 A类 应该是 "different value" 。

实际行为
字段的值 A类 仍然保持不变。

问题

1. 为什么字段的值 A类 使现代化
2. 如何修复?

应用程序.js

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [typeA, setTypeA] = useState("01");
  const [typeB, setTypeB] = useState("abc");

  const [allTypes, setAllTypes] = useState({
    typeA: [typeA],
    typeB
  });
  console.log({ typeA }); // updated successfully
  console.log({ allTypes }); // the value of typeA remain unchanged
  return (
    <div>
      <button
        onClick={() => {
          setTypeA("different value");
        }}
      >
        Update type A
      </button>
    </div>
  );
}

代码沙盒
https://codesandbox.io/s/jovial-lichterman-w1kbph?file=/src/App.js