我无法以反应钩子形式从控制器组件检索值

Question

所以我试图检索预算的值，当我控制台记录状态值时，一切都很好，但是当点击提交时，它显示预算未定义。任何帮助将不胜感激！

const Step12 = (props) => {
  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const { state, actions } = useStateMachine({ updateAction });
  const onSubmit = (data) => {
    actions.updateAction(data);
    props.history.push("./step13");
    console.log("Step 12 Data", data);
  };
  const classes = useStyles();
  const [value, setValue] = useState(1000);

  const handleSliderChange = (event, newValue) => {
    setValue(newValue);
  };
  console.log(value);
  return (
    <div className='step_container'>
      <LeftSide />
      <div className='step_formContainer'>
        {/* <StepCounter {...props} /> */}
        <div className='stepCounter_currentStep'>
          12 <span style={{ fontSize: "13px" }}>OF</span> 13
        </div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className='step_formBody'>
            <div className={classes.root}>
              <div className={classes.margin} />

              <Controller
                control={control}
                name='budget'
                render={({ field }) => (
                  <PrettoSlider
                    {...field}
                    onChange={handleSliderChange}
                    value={value}
                    valueLabelDisplay='on'
                    aria-label='pretto slider'
                    min={250}
                    step={25}
                    max={2500}
                  />
                )}
              />
            </div>
          </div>
          <input className='step_nextButton' value='NEXT' type='submit' />
        </form>
        <Link to='/step11'>
          <input className='step_backButton' value='BACK' type='submit' />
        </Link>
      </div>
    </div>
  );
};

export default withRouter(Step12);

所以我试图检索预算的值，当我控制台记录状态值时，一切都很好，但是当点击提交时，它显示预算未定义。任何帮助将不胜感激！