我Map了从api获取的依赖项列表。每个依赖项都有相应的复选框和输入框。

const [depInput, setDepInput]= useState({disable:"true", checked:"false"});

<div>
 {items.dependents?.map((item, key) => {
                return (

                    <p key={key}> Name: {item.name} </p>
                    <div>
                      <input 
                      type="checkbox"
                      value={!depInput.checked}
                      onChange={() => setDepInput(!depInput.disable)}
                      disable={!depInput.disable} />
                    </div>
                    <div>
                      <input type="text"

                       placeholder="Enter correct detail"
                       disabled={!depInput.disable}
                       onChange={() => setDepInput(!depInput.checked)} />
                    </div>
                    <div>
                      <select defaultValue={item.type_of_dependent}>
                        <option>Primary</option>
                        <option>Secondary</option>
                        <option> NA</option>
                      </select>
                    </div>
                  </>
                );
              })}
</div>

当我单击第一个依赖项的复选框时，它将禁用其他输入文本框。我希望每个复选框和相应的输入文本框都有一个切换状态。