react-hook-form & material-UI Select

Question

I am having an issue getting the following code to work with react-hook-form.

I am seeking a solution so that when I hit submit, it submits it. The error is saying there is no name property, however you will see the code does have a name property value

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

const onSubmit = data => console.log(data);

  
return(
<form onSubmit={handleSubmit(onSubmit)} className={classes.container}>
         
 <TextField fullWidth   
                    onChange={changeBudget}
                    inputRef={register({ required: true })}
                    id="select" 
                    name="campaignSpend" 
                    label="Campaign Budget" 
                    value={campaignBudget}
                    select variant="outlined">
                      <MenuItem value="250">$250</MenuItem>
                      <MenuItem value="500">$500</MenuItem>
                      <MenuItem value="$1000">$1000</MenuItem>
                    </TextField>

                <Button className={classes.button} type="submit" variant="outlined" aria-label="delete" color="primary" >
                  Continue
                </Button>

 </form>
)

I also tried

<FormControl className={classes.formControl} component="fieldset" inputRef={register({ required: true })}>
                      <InputLabel id="demo-controlled-open-select-label">Campaign Budget</InputLabel>
                      <Select
                        labelId="demo-controlled-open-select-label"
                        id="demo-controlled-open-select"
                        name="test"
                        open={open}
                        onClose={handleClose}
                        onOpen={handleOpen}
                        value={campaignBudget}
                        onChange={changeBudget}
                   
                      >
                        <MenuItem value="">
                          <em>None</em>
                        </MenuItem>
                        <MenuItem value={10}>Ten</MenuItem>
                        <MenuItem value={20}>Twenty</MenuItem>
                        <MenuItem value={30}>Thirty</MenuItem>
                      </Select>
                    </FormControl>

Answer 1

If you are using v7 the best way was to use controllers for Material Ui components including Textfield and Selects

import { useForm, Controller } from 'react-hook-form';

//component

const methods = useForm();
const { control } = methods;

 <FormControl fullWidth variant="outlined">
            <InputLabel htmlFor="campaign_budget_label">Campaign Budget</InputLabel>
            <Controller
              name="campaignSpend"
              control={methods.control}
              rules={{ required: 'Budget Required' }}
              render={({ field: { onChange, value} }) => (
                <Select 
                  value={value}
                  onChange={onChange}
                  label="Campaign Budget" 
                  labelId="campaign_budget_label"
                  >
                  <MenuItem value="250">$250</MenuItem>
                  <MenuItem value="500">$500</MenuItem>
                  <MenuItem value="$1000">$1000</MenuItem>
                </Select>
              )} 
              defaultValue="" // make sure to set up defaultValue
            />
          </FormControl>