如何在不创建新密钥的情况下动态更改映射中的项目?

我有 following sandbox

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

export default function App() {
  interface filter {
    company: boolean;
    gender: boolean;
  }
  const [people, setPeople] = useState<filter>({
    company: false,
    gender: false,
  });

    useEffect(() => {
    console.log(people);
  }, [people]);


  const toggleMenu = (menuItem: keyof typeof people) => {
    setPeople({ ...people, menuItem: !people[menuItem] });
  };


  return (
    <div className="App">
                    <button
                className="flex flex-row justify-center w-full"
                onClick={() => toggleMenu("company")}
              >
Click me 
</button>
    </div>
  );
}

这个 toggleMenu 函数似乎无法正常工作。这个想法是传递一个任意的键(例如“company”),并让它切换值。相反,我得到以下输出:

{company: false, gender: false, menuItem: true}

我想要什么:

{company: true, gender: false}

我尝试了上面的代码,但没想到会在我的地图中看到一个新的密钥。。。只需要更新现有密钥。