Here is my code.

// intial image load
const loadImage = () => {
canvas?.clear();
fabric.Image.fromURL(src, function (img) {
img.set({ id: 'main_canvas_image', hasControls: false });
img.set({ scaleX: 1, scaleY: 1 });
img.scaleToWidth(canvas.width);

  if (img.height < canvas.height) {
    img.scaleToHeight(canvas.height);
  }

  canvas.add(img);
  canvas.renderAll();
  loadFilterPreview();
});

handleImageMoving();
};

// filters list with preview
const loadFilterPreview = () => {
const filtersList = [
new fabric.Image.filters.Vibrance({ vibrance: 1 }),
new fabric.Image.filters.Contrast({ contrast: 0.1 }),
new fabric.Image.filters.Brightness({ brightness: 0.1 }),
new fabric.Image.filters.Gamma({ gamma: [1, 2, 2] }),
new fabric.Image.filters.HueRotation({ rotation: 90 }),
new fabric.Image.filters.Brightness({ brightness: 0.5 }),
];

const updatedPreviews = [
  { label: 'Original', preview: '', filters: [] },
  {
    label: 'Studio',
    preview: '',
    filters: [filtersList[0], filtersList[1]],
  },
  { label: 'Spotlight', preview: '', filters: [filtersList[2]] },
  { label: 'Prime', preview: '', filters: [filtersList[3]] },
  { label: 'Classic', preview: '', filters: [filtersList[4]] },
  { label: 'Edge', preview: '', filters: [filtersList[5]] },
  { label: 'Luminate', preview: '', filters: [filtersList[6]] },
];

setFilterPreview(
  updatedPreviews.map(filterItem => ({
    ...filterItem,
    preview: canvas?.toDataURL?.(),
  }))
);
};

// useEffect for handle filter change
useEffect(() => {
const current = filterPreview.find(e => e.label === filter);
if (current && canvas) {
const canvasImage = canvas
?.getObjects()
?.find(e => e.id === 'main_canvas_image');

  canvasImage.filters = current.filters;
  canvasImage.applyFilters();`your text`
  canvasImage.scaleToWidth(canvas.width);
  canvas.renderAll();
}
}, [filter]);`