Reactjs 改变输入的默认值时出现问题：number reacthookform

我正在创建一个模式窗口，它为用户提供了通过输入改变数量的其他选项，以及增加或减少数量的一些按钮，所有这些都是通过Reaction-Hook-Form函数处理的.

export const ModalCart = ({ show, id, amount, setHandleConfigModal }) => {
    
    const api = new FormService();
    const { handleSubmit, register, setValue, getValues, formState: { isSubmitting } } = useForm()

    const onSubmit = async (formData) => {
        try {
            console.log({...formData, id})
            setHandleConfigModal({ show: false })
        } catch (e) {
            console.log(e)
        }
    }

    return (
        <Modal
            show={ show }
            onHide={ () => setHandleConfigModal({ show: false }) }
        >
            <Modal.Header closeButton>
                <Modal.Title>Handle the Amount</Modal.Title>
            </Modal.Header>
            
            <Modal.Body>
                <Form onSubmit={ handleSubmit(onSubmit) }>
                    <div className="d-flex gap-2 justify-content-between">
                        <div>
                            <Button
                                className="btn btn-outline-dark px-3 ms-2"
                                disabled={isSubmitting}
                                onClick={ () => setValue( 'amount', Number(getValues('amount')) - 1 ) }
                            >
                                +
                            </Button>
                        </div>

                        <div className="w-100">
                            <Form.Control
                                type="number"
                                placeholder="0"
                                disabled={isSubmitting}
                                defaultValue={ amount}
                                min={0}
                                {...register('amount')}
                            />
                        </div>

                        <div>
                            <Button
                                className="btn btn-outline-dark px-3 me-2"
                                disabled={ isSubmitting }
                                onClick={ () => setValue( 'amount', Number(getValues('amount')) + 1 ) }
                            >
                                -
                            </Button>
                        </div>
                    </div>

                    <Button 
                        disabled={ isSubmitting }
                        type="submit"
                        className="btn btn-primary px-3 me-2 mt-2"
                    > 
                        Save
                    </Button>
                </Form>
            </Modal.Body>
        </Modal>
    );
}

first shipment: amount = 15

输出提交 {金额:15，ID:2}

first shipment: the amount should be = 2

预期提交输出 {金额:2，ID:2}

已收到输出提交 {金额:15，ID:2}

我遇到的问题是，当通过props 将第一个量发送到模型时，它被正确地分配给输入，但在再次发送另一个量后，输入保持先前的值.如果有人能帮我解决这个问题，我是新手，我会很感激你的帮助.