如何将 react-hook-form v7 与 reactstrap 9 一起使用？

Question

I'm currently trying to create a form with react-hook-form v7 and reactstrap 9, using react 18. Here's my current implementation but in my console logs, the data is returning an undefined . If you guys could tell me how to properly integrate them, it would be helpful. Thanks a lot!

  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    //here, the output is --> {email: undefined, password: undefined}
    console.log("sign in form data", data);
  };

// Sample Form
 <Form inline onSubmit={handleSubmit(onSubmit)}>
      <FormGroup className="mb-2">
        <Label className="auth-label" htmlFor="email">
          Email address*
        </Label>
        <Input
          id="email"
          name="email"
          placeholder=""
          type="email"
          className="auth-input"
          {...register("email")}
        />
      </FormGroup>
      <Button block className="auth-button mt-4">
        Login
      </Button>
 </Form>

Answer 1

Try to define register variable as follows:

const { ref, ...sampleName } = register("name");

and use this ref inside Reactstrap Input

<Input innerRef={ref} {...sampleName}/>

Please see sandbox here: https://codesandbox.io/s/reactstrap-sandbox-forked-z2uxl?file=/src/index.js:808-842