我认为你只需要一个简单的布尔状态，并根据所选择的选项，你可以切换其值。
替换

const [openChoiceId, setOpenChoiceId] = useState(null);

const handleClick = (choice) => {
    if (choice.essay === true) {
      setOpenChoiceId(choice.choices);
    } else {
    }
  };

与

const [visibleTextField, setVisibleTextField] = useState(false);

const handleChange = (e, choice) => {
  if (choice.essay) {
    setVisibleTextField(e.target.checked);
  }
};

显示文本字段的条件应替换为

{
  visibleTextField && (
    <TextField
      id="filled-multiline-static"
      label="Others"
      fullWidth
      multiline
      rows={3}
      name="essay"
      onChange={handleTextFieldChange}
      variant="outlined"
    />
  );
}

监听更改事件，而不是像下面这样单击

<input
    className="toggle-button__state"
    type="checkbox"
    name="choice"
    value={choice.choices}
    onChange={(e) => handleChange(e, choice)}
  />

最终代码

const [visibleTextField, setVisibleTextField] = useState(false);

const handleChange = (e, choice) => {
  if (choice.essay) {
    setVisibleTextField(e.target.checked);
  }
};
{
  currentChoices.map((choice, index) => (
    <Grid item xs={6} key={index}>
      <label className="toggle-button" key={choice.id}>
        <input
          className="toggle-button__state"
          type="checkbox"
          name="choice"
          value={choice.choices}
          onChange={(e) => handleChange(e, choice)}
        />
        <span className="toggle-button__text">{choice.choices}</span>
      </label>

      <Box
        sx={{
          position: 'absolute',
          bottom: 50,
          left: 0,
          width: '100%',
          px: 2,
        }}
      >
        {visibleTextField && (
          <TextField
            id="filled-multiline-static"
            label="Others"
            fullWidth
            multiline
            rows={3}
            name="essay"
            variant="outlined"
          />
        )}
      </Box>
    </Grid>
  ));
}

当你点击任何一个按钮时，确保一开始就将所有的“choices.essay”值设置为false。你可以通过以下方式做到这一点：

choices.forEach(item => item.essay = false);

然后，您可以打开或关闭essay textarea on按钮单击。如果essay为true，则设置为false。如果essay值为false，则设置为true。

const handleClick = (choice) => {
    if(choice.essay === true) {
        choice.essay = false
    } else {
        choice.essay = true
    }
}

而且，当你呈现组件时，确保只有当“choice.essay === true”时才呈现它。你可以删除“openChoiceId === choice.choice”语句。它是这样的

{choice.essay === true && 
    <TextField 
        id="filled-multiline-static"
        label="Others"
        fullWidth
        multiline
        rows={3}
        name="essay" onChange={handleTextFieldChange} 
        variant="outlined"
    />}

从编辑后的代码看，你似乎在选择多个选项，当你选择其他选项时，你需要显示输入。你可以做下面的事情来实现这一点。

const [openChoices, setOpenChoices] = useState([]);
  const handleChange = (e, choice) => {
    if (e.target.checked) {
      setOpenChoices(prev => [...prev, choice.choices]);
    } else {
      setOpenChoices(prev => prev.filter(p => p !== choice.choices));
    }
  };

在JSX中

{currentChoices.map((choice, index) =>(
                  <Grid item xs={6} key={index}>
                   <label className="toggle-button" key={choice.id}>
                   <input className="toggle-button__state" type="checkbox" name="choice" value={choice.choices} onChange={e => handleChange(e, choice)}/>
                   <span className="toggle-button__text">{choice.choices}</span>
                   
                   <Box sx={{position:'absolute', bottom: 50, left: 0, width: '100%', px: 2}}>
                   {openChoices.includes(choice.choices) && choice.essay === true && 
                   <TextField
                    id="filled-multiline-static"
                    label="Others"
                    fullWidth
                    multiline
                    rows={3}
                    name="essay" onChange={handleTextFieldChange} 
                    variant="outlined"
                  />}

                   </Box>

                 </label>
                  </Grid>
                  
              ))}

你有很多事情需要解决
首先，您没有检查复选框是否被选中，因此您可以将其删除或添加到状态

onClick={(e) => handleClick(choice,e)}

  const handleClick = (choice,e) => {
    setOpenChoiceId(e.currentTarget.checked ? choice : {});
  };

我删除了带有文本的span，并添加了一个带有htmlFor的标签，因此每当您单击文本时，它都会单击实际的复选框，现在onClick事件处理程序需要位于复选框而不是标签上

<label
      className="toggle-button"
      htmlFor={choice._id}
    >
      {choice.choices}
      </label>

      <input
        className="toggle-button__state"
        id={choice._id}
        type="checkbox"
        name="choice"
      onClick={(e) => handleClick(choice,e)}
        value={choice.choices}
      />

最后一件事是你做了一个错误的条件语句
要显示textField，您需要检查状态，而不是之前所做的，条件链接.?是因为openChoiceId将在没有复选框被选中时设置为空，并且将是一个对象，不会将essay作为属性

{openChoiceId?.essay === true && (jsx goes here) }