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 ?