Suppose I have a slider and another button both contained in a Popover to update the value of the slider to 0. I want when the button is pressed, the slider’s thumb and value also set dinamically to 0 but only change after I close and re-open the Popover

Note that I use Popover from Shadcn and Slider from NextUI
Here is my implementation:

interface StrokeWidthPickerProps {
  strokeWidth: number;
  setStrokeWidth: (width: number) => void;
} //this is useState from the parent component

const StrokeWidthPicker = ({ strokeWidth, setStrokeWidth }: StrokeWidthPickerProps) => {
  const handleOnChange = (value: number | number[]) => {
    if (!Array.isArray(value)) {
      setStrokeWidth(value);
    }
  };

  const handleBtnClick = () => {
    setStrokeWidth(0);
  };

  return (
    <Popover placement="bottom" showArrow={true} className='w-[340px] h-[288px] p-4'>
      <PopoverTrigger>
        <button onClick={handleBtnClick}>Set Stroke Width to 0</button>
      </PopoverTrigger>
      <PopoverContent>
        <Slider
          isDisabled={strokeWidth === 0}
          label="Stroke width"
          size='sm'
          step={1}
          maxValue={100}
          minValue={0}
          value={strokeWidth} // Controlled component
          onChange={handleOnChange}
          className="max-w-md"
        />
        <button onClick={handleBtnClick}>Reset to 0</button>
      </PopoverContent>
    </Popover>
  );
};

I also add isDisabled to disable the slider if strokeWidth is 0, but this also not work immediately, the slider only disables after closing and re-open the Popover.
Any suggestions are appreciated. Thank you.