REACT: UseState is not updating the variable (ant design modal form)

I'm using Antdesign for this modal. I have a modal form shown when user click on delete button, this modal has two radio button group , and confirm should call different functions based on selected value. I use UseState for updating the selectedValue, but seems its not getting updated. also I cant change the pre-selected value to the other option. the handler is getting called however.

const Signatures = () => {
     const [selectedOption, setSelectedOption] = useState('deleteSignature');
     const handleDeleteOptionsChange = (event) => {
      setSelectedOption(event.target.value);
     }
    const onDeleteClick = (id) => {
    Modal.confirm({
      okText: 'Confirm',
      centered: true,
      title: 'To Delete this documents, press \'Confirm\'',
      content: (
        <Radio.Group onChange={handleDeleteOptionsChange} value={selectedOption}>
          <Radio checked={selectedOption ==='deleteSignature'}  value="deleteSignature">Delete signature request</Radio>
          <Radio checked={selectedOption ==='deleteSignatureAndDocument'}  value="deleteSignatureAndDocument">Delete signature request and document</Radio>
        </Radio.Group>
      ),
      onOk: async () => {
          if (selectedOption==='deleteSignature')
          {//return onDeleteSignature(id);} 
          else {//return onDelete(id);}
        
      },
    });
  };

...
return ();
    };
export default Signatures;

handleDeleteOptionsChange is being triggered but no state update and no radio button change on UI side

any help would be greatly appreciated.

I think selectedValue and the radio button group aren't getting updated because you are using the Modal.confirm method. This is a static method that creates a modal dialog outside of the React component lifecycle. This means that the modal dialog does not have access to the component's state or props, and does not re-render when they change. So to fix this problem, you need to use Modal component instead of Modal.confirm method.

For example:

const Signatures = () => {
  const [selectedOption, setSelectedOption] = useState("deleteSignature");
  const [visible, setVisible] = useState(false);
  const handleDeleteOptionsChange = (event) => {
    setSelectedOption(event.target.value);
  };

  const handleOk = async () => {
    if (selectedOption === "deleteSignature") {
      //return onDeleteSignature(id);
    } else {
      //return onDelete(id);
    }
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <>
      <Modal
        visible={visible}
        okText="Confirm"
        centered
        title="To Delete this documents, press 'Confirm'"
        content={
          <Radio.Group
            onChange={handleDeleteOptionsChange}
            value={selectedOption}
          >
            <Radio
              checked={selectedOption === "deleteSignature"}
              value="deleteSignature"
            >
              Delete signature request
            </Radio>
            <Radio
              checked={selectedOption === "deleteSignatureAndDocument"}
              value="deleteSignatureAndDocument"
            >
              Delete signature request and document
            </Radio>
          </Radio.Group>
        }
        onOk={handleOk}
        onCancel={handleCancel}
      />
    </>
  );
};

To learn more, see Ant Design Documentation - Modal