antd disable all other Checkboxes when single selected

Question

I was trying to use antd Checkboxes for single selection, but there are no docs about how to disable other checkboxes when single selected. There is "disabled" boolean option which should be true for all checkboxes except selected.

Is that possible with react.jsx?

const [checkList, setCheckList] = useState(array)
const [disable, setDisable] = useState(false)

{checkList.map((item) => (
<CheckBox onChange=(e => e.target.checked ? setDisable(true) : setDisable(false)) disabled={disable}>{item}</CheckBox>))

That what I did, but it disables all of the checkboxes.

UPD: Here is working option, but it doesn't look good. Are there any way to do it better?

const [one, setOne] = useState(false);
  const [two, setTwo] = useState(false);
  const [three, setThree] = useState(false);

<Checkbox
                    onChange={e => {
                      if (e.target.checked) {
                        setTwo(true);
                        setThree(true);
                      } else {
                        setTwo(false);
                        setThree(false);
                      }
                    }}
                    disabled={one}
                  >
                    1
                  </Checkbox>
                  <Checkbox
                    className="ml-0"
                    onChange={e => {
                      if (e.target.checked) {
                        setOne(true);
                        setThree(true);
                      } else {
                        setOne(false);
                        setThree(false);
                      }
                    }}
                    disabled={two}
                  >
                    2
                  </Checkbox>
                  <Checkbox
                    className="ml-0"
                    onChange={e => {
                      if (e.target.checked) {
                        setOne(true);
                        setTwo(true);
                      } else {
                        setOne(false);
                        setTwo(false);
                      }
                    }}
                    disabled={three}
                  >
                    3
                  </Checkbox>

Answer 1

import { Checkbox } from 'antd';
import { useState } from 'react';

export default function App() {
    const [checkList, setCheckList] = useState(['A', 'B', 'C', 'D']);
    const [isSelected, setIsSelected] = useState();

    const onChange = (e) => {
        if (e.target.checked) {
            !isSelected && setIsSelected(e.target.name);
        } else {
            setIsSelected(null);
        }
    };

    return checkList.map((item) => (
        <Checkbox disabled={isSelected ? isSelected !== item : false} name={item} key={item} onChange={onChange}>
            {item}
        </Checkbox>
    ));
}

You can create a state and set the checkbox key in that state. I use name attribute and assign each checkbox with item (Assuming that checkList state have unique elements or keys) get the key from the onChange Event of each checkbox and then i get the value of name from e.target + checkbox value from e.target.checked. I checked is isSelected state is not null then store the key. I each checkbox, check the disabled attribute where i check if we have any key in isSelected state and that key is not same as the checkbox key, it will be disabled otherwise it will only be selected checkbox.