why does handleSubmit in react hook useform is not being called

I am using useform hook but the handlesubmit function is not being called . here is the code:

This is the useform hook i am using

 const { register, handleSubmit, formState: { errors }, watch, reset, } = useForm<SellingInvoiceClientDetails>({ resolver: yupResolver(SellingInvoiceScheme), defaultValues: { rib: "", cardNumber: "", cardType: CardType.IDENTITY_CARD,},}); 

The function i want to call in the hundleSubmit is the following

 const addSellingInvoiceClientDetails = ( sellingInvoiceDetails: SellingInvoiceClientDetails ) => { console.log(sellingInvoiceDetails.cardType); props.setSelectedClient(); props.updateSellingInvoiceInfo( sellingInvoiceDetails.cardType, sellingInvoiceDetails.cardNumber, sellingInvoiceDetails.rib ); handleClose(); }; 

The code of the Form :

 return ( <> <Modal.Header closeButton> <Modal.Title> <FormattedMessage id={"client.info"} /> </Modal.Title> </Modal.Header> <Modal.Body> <Form onSubmit={handleSubmit(addSellingInvoiceClientDetails)}> <Form.Group className="mb-3"> <Form.Label> <FormattedMessage id={"card.number"} /> </Form.Label> <Form.Control {...register("cardNumber")} placeholder={intl.formatMessage({ id: "card.number" })} /> <Form.Text className=" text-danger"> {errors.cardNumber?.message} </Form.Text> </Form.Group> <Form.Group className="mb-3"> <Form.Label> <FormattedMessage id={"card.type"} /> </Form.Label> <Form.Check {...register("cardType")} type={"radio"} label={intl.formatMessage({ id: CardType.IDENTITY_CARD })} value={CardType.IDENTITY_CARD} id={"identity_card"} /> <Form.Check {...register("cardType")} type={"radio"} label={intl.formatMessage({ id: CardType.DRIVING_LICENCE })} value={CardType.DRIVING_LICENCE} id={"driving_licence"} /> <Form.Text className=" text-danger"> {errors.cardType?.message} </Form.Text> </Form.Group> <Form.Group className="mb-3"> <Form.Label>RIP</Form.Label> <input type="text" className="form-control" {...register("rib")} placeholder="XXXXXXXXXXXXX" /> <Form.Text className=" text-danger"> {errors.rib?.message} </Form.Text> </Form.Group> </Form> </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={handleClose}> <FormattedMessage id={"cancel"} /> </Button> <Button type="submit" variant="primary" onClick={handleSubmit(addSellingInvoiceClientDetails)} > <FormattedMessage id={"ok"} /> </Button> </Modal.Footer> </> 

);

the function addSellingInvoiceClientDetails is not being excuted and when i click the Ok button nothing happens altough the handleClose function called in cancel button is working just fine.