Component value does not update on React-hook-form – NextJS

So, I have tried everything but cannot figure this out at all.
I have this reusable component made with ShadCn Slider,

function SliderWithCounter({ min, max, step = 1, onChange, value }: any) {
  const [sliderValue, setSliderValue] = useState(min);

  const handleChange = (newValue: any) => {
    console.log("SliderWithCounter - newValue:", newValue);
    setSliderValue(newValue);
    onChange(newValue);
  };

  const handleIncrement = () => {
    setSliderValue(Math.min(sliderValue + step, max));
  };

  const handleDecrement = () => {
    setSliderValue(Math.max(sliderValue - step, min));
  };

  return (
    <div className="flex flex-row justify-between items-center gap-2 ">
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger type="button">
            <Slider
              value={[sliderValue]}
              defaultValue={[min]}
              max={max}
              step={step}
              onChange={handleChange}
              className="w-[250px] md:flex hidden"
            />
          </TooltipTrigger>
          <TooltipContent sideOffset={5}>{sliderValue}</TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <div className="flex flex-row gap-2 items-center justify-center">
        <Button onClick={handleIncrement} variant={"outline"} type="button">
          +
        </Button>
        <Input
          value={sliderValue}
          className="md:w-[60px]"
          onChange={(e) => setSliderValue(e.target.value)}
        />
        <Button onClick={handleDecrement} variant={"outline"} type="button">
          -
        </Button>
      </div>
    </div>
  );
}
export default SliderWithCounter;

The UI portion of this works perfectly, the slider moves, the input field value updates and vice-versa.

But now I import this into my form:

 <FormField
                control={form.control}
                name="batchSize"
                render={({ field }) => {
                  return (
                    <FormItem>
                      <FormLabel className="flex flex-row items-center gap-2">
                        Batch size
                        <ToolTipComponent tooltipText="Number of images" />
                      </FormLabel>
                      <FormControl>
                        <SliderWithCounter
                          min={1}
                          max={20}
                          onChange={(value: any) => {
                            console.log("FormField - onValueChange:", value);
                            field.onChange(value);
                          }}
                          step={1}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  );
                }}
              />

formSchema: batchSize: z.array(z.number()),
And the default value for this is batchSize: [],

Now the onChange of the form never fires, I cannot see the console.log ever, I want the values to be updated to use in my form, but I have no idea how to fix this. Thanks for your help!