reactjs-更新嵌套的 React 状态？

我正在尝试更新嵌套的状态对象的一部分。这是对象：

const [buttonObject, setButtonObject] = useState({
    intro: [
      {
        id: '123',
        name: 'first_intro_name',
        selected: false,
      },
      {
        id: '124',
        name: 'second_intro_name',
        selected: false,
      },
    ],
    experience: [
      {
        id: '789',
        name: 'first_experience_name',
        selected: false,
      },
      {
        id: '8910',
        name: 'second_experience_name',
        selected: false,
      },
    ],
  });

单击按钮时，我想切换选定状态。我正在使用如下所示的点击处理程序：

const handleButtonClick = ({ id, selected }) => {
    if (id === '123') {
      buttonsObject.intro.map(
        pref => (pref.selected = pref.id === id ? !pref.selected : selected)
      );
      setButtonsObject(buttonsObject);
    } else if (id === '124') {
      buttonsObject.intro.map(
        pref => (pref.selected = pref.id === id ? !pref.selected : selected)
      );
      setButtonsObject(buttonsObject);
    }
  };

它也会处理经验。问题是，现在它似乎不是更新对象，而是覆盖对象或创建一个新对象。即使我已正确路由它，它也不会将该信息传递回组件。

有没有更好/正确的语法来更新这样的嵌套状态？

谢谢。