validation readOnly and input manual in react js

Question

How do you do that when the calculator data is duplicated then Calculation # can be input manually and not readOnly but only applies when duplicated, if not duplicated then Calculation # remains readOnly.

I've tried to set it using state, but when I click duplicate, it's still readonly and not input manually. Is there any other solution?

const [isDuplicated, setIsDuplicated] = useState(false);

const handleDuplicate = () => {
        swal({
            title: 'Confirmation',
            text: 'Are you sure want to duplicate this data?',
            icon: 'warning',
            buttons: [true, 'Duplicate'],
        }).then((succeed) => {

            if (succeed) {
                const newFormData = { ...formData };
                newFormData.id = 0;
                newFormData.calculatorDetails = newFormData.calculatorDetails.map((item) => {
                    const detail = { ...item, id: 0 };
                    return detail;
                });
                newFormData.calculatorApprovals = [];
                newFormData.calculatorHistories = [];

                addData({ url, body: newFormData }).then((res) => {
                    navigate(`${path}/${res.data.id}/edit`);
                });
                setIsDuplicated(true);
            }

        });
    };

<div className="form-group col-sm-6">
                        <label>Calculation #</label>
                        <input className="form-control" type="text" name="voucherNo" value={voucherNo} onChange={isCountReverse ? (e) => onCountReverseChange(e) : (e) => onChange(e)} readOnly={!isDuplicated} />
                    </div>