Can the modal be made aware of the calling component state

[mdodge-ecgrow]

I have a custom ui modal with 2 buttons yes/no. But I only want to enable the "yes" button when the user types in a word into an input box in the modal. I have a state variable that switches to true when the word is typed. But the button is not enabling. And I printed out the variable onto the modal as well and that is not changing.

Here is my modal code:

confirmAlert({
    customUI: ({ onClose }) => {
        return (
            <div className={'custom-ui-dialog'}>
                <h1>Confirm Complete Shift</h1>
                <div className={'body'}>
                    <h3>
                        Are you sure you want to complete the shift?
                        <br />
                        Type COMPLETE below to confirm.
                    </h3>
                    <input
                        type={'text'}
                        className={'form-control'}
                        onChange={checkInput}
                    />
                    <br />

                    <div className={'buttons'}>
                        <button onClick={onClose}>No</button>
                        <button
                            onClick={switchShifts}
                            disabled={!completedTyped}
                        >
                            Yes
                        </button>
                    </div>
                    {`completedTyped: ${completedTyped}`}
                </div>
            </div>
        );
    },
    closeOnEscape: false,
    closeOnClickOutside: false,
});

[rajeevnathverma]

HI, anyone found this solutions ?