I'm trying to add `react-hook-form` to my `reactstrap` form and inputs, but looks like it has a conflict between the packages.

```
import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
import {
    Button,
    Form,
    Label,
    Input
} from 'reactstrap';
import { FormControlLabel, Checkbox, FormGroup } from '@material-ui/core';

...

const { register, handleSubmit, errors } = useForm();

...

const updDetails = (data) => {
   console.log(data);    
}

return (
   <Form onSubmit={handleSubmit(updDetails)}>
      <FormGroup className="mr-10 mb-10">
         <Label for="compName" className="mr-sm-10">Company Name</Label>
         <Input type="text" name="compName" id="compName" placeholder="Company Name"
            ref={register({ required: true })} aria-invalid={errors.name ? "true" : "false"}
            value={compDetails.compName} onChange={(e) => setCompDetails({...compDetails, compName: e.target.value})}
         />
         {errors.name && errors.name.type === "required" && (
            <span role="alert">This is required</span>
         )} 
      </FormGroup>
      <Button type="submit" className="col-sm-3" color="primary">Update Details</Button>
   </Form>
)
...

```

When I load the page, I can see in the browser console warnings for all my inputs: `Field is missing `name` attribute` . However, I am adding the name to every input as in the code above. Also, when I click on `Update Details` with an empty value for the `compName` it submits and the data is empty object.
Can't I use `react-hook-form` with `reactstrap`?

Thanks