react-hook-form + ChakraUI NumberInput

NumberInput.tsx

import {
  NumberDecrementStepper,
  NumberIncrementStepper,
  NumberInput,
  NumberInputField,
  NumberInputStepper,
} from "@chakra-ui/react";
import { Controller } from "react-hook-form";

<Controller
  name="sample"
  control={control}
  render={({ field: { ref, onChange, ...rest } }) => (
    <NumberInput {...rest} onChange={(_, v) => onChange(v)}>
      <NumberInputField ref={ref} />
      <NumberInputStepper>
        <NumberIncrementStepper />
        <NumberDecrementStepper />
      </NumberInputStepper>
    </NumberInput>
  )}
/>