I'm new to fabricjs, I've been trying to blur an image using a HTML slider(range from 0 - 1). The image has already been loaded on the canvas. But while applying the blur effect using Filters arrays, I don't see any visible change.

I'm using a controlled blur component in React as follows :

<div>
  Blur
    <input
      id="blur"
      type="range"
      min="0"
      max="1"
      step="0.1"
      value={editor?.canvas?.getActiveObject()?.filters?.slice(-1)[0]?.blur || 0}
      onChange={(e) => handleChangeSlider("blur", e?.target?.value)}
      ></input>
   <span>{editor?.canvas?.getActiveObject()?.filters.slice(-1)[0]?.blur || 0}</span>
 </div>

the onChange handler function is as follows :

function handleChangeSlider(){
setBlur(value)
editor?.canvas?.getActiveObject()?.filters?.push({
        blur: 0.5,
        horizontal: false,
        aspectRatio: 1,
      })
// editor?.canvas?.getActiveObject()?.applyFilters()
}
editor.canvas.renderAll()
}

The same approach works if I'm setting opacity on the image, like:

editor.canvas.getActiveObject().set({ opacity: value })

But, as far as I know, the Blur has to be inside the filters array, So I've tried doing the same, but it is not working at all.

Some Observations :

1. Even after doing the editor.canvas.renderAll() , I think editor?.canvas?.getActiveObject()?.applyFilters() is necessary to apply the blur property. But if I uncomment that line from above code, i get the following error "filter.isNeutralState is not a function" . While that line being kept commented, I don't see any error or any change.

2. I found this codepen link, where the author is literally doing the same, But I'm not sure what I'm doing wrong in my case.

My editor?.canvas?.getActiveObject()