diff --git a/README.md b/README.md
index 9e7dc1b4..ace1dea0 100644
--- a/README.md
+++ b/README.md
@@ -359,6 +359,7 @@ The image url or an `HTMLImageElement` for the image which the operations/edits
 Theme from [@scaleflex/ui](https://github.com/scaleflex/ui/blob/1617f8b19ade7199110df6e2ceff77dacefd75bd/packages/ui/src/theme/entity/default-theme.ts#L43) deep merged with following overrides
 
 ```
+// Overrides
 {
   palette: {
     'bg-primary-active': '#ECF3FF',
@@ -367,6 +368,28 @@ Theme from [@scaleflex/ui](https://github.com/scaleflex/ui/blob/1617f8b19ade7199
     fontFamily: 'Roboto, Arial',
   },
 }
+
+// Used properties in case you need to provide your custom colors/theme, you should customize those properties (all or any of them) with your color hex/name string values.
+{
+  palette: {
+    'bg-secondary': '....',
+    'bg-primary': : '....',
+    'bg-primary-active': : '....',
+    'accent-primary': : '....',
+    'accent-primary-active': : '....',
+    'icons-primary': : '....',
+    'icons-secondary': : '....',
+    'borders-secondary': : '....',
+    'borders-primary': : '....',
+    'borders-strong': : '....',
+    'light-shadow': : '....',
+    'warning': : '....',
+
+  },
+  typography: {
+    fontFamily: : '....', // Font family string value, you should import this font in your app.
+  },
+}
 ```
 
 Almost you would need those 2 objects ([**palette**](https://github.com/scaleflex/ui/blob/master/packages/ui/src/utils/types/palette/color.ts#L1) _values are the possible keys for palette object_ & [**typograpghy**](https://github.com/scaleflex/ui/blob/master/packages/ui/src/theme/entity/default-theme.ts#L52)) to have the proper theme you want.
diff --git a/packages/react-filerobot-image-editor/package.json b/packages/react-filerobot-image-editor/package.json
index 3fabed66..8213092a 100644
--- a/packages/react-filerobot-image-editor/package.json
+++ b/packages/react-filerobot-image-editor/package.json
@@ -29,11 +29,11 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@scaleflex/icons": "1.0.0-beta.80",
-    "@scaleflex/ui": "1.0.0-beta.80",
-    "konva": "8.3.2",
+    "@scaleflex/icons": "1.0.0-beta.99",
+    "@scaleflex/ui": "1.0.0-beta.99",
+    "konva": "8.4.2",
     "prop-types": "15.7.2",
-    "react-konva": "18.1.1"
+    "react-konva": "18.2.4"
   },
   "peerDependencies": {
     "react": "18.2.0",
@@ -43,4 +43,4 @@
   "scripts": {
     "build:lib": "rimraf lib && cross-env BABEL_ENV=production NODE_ENV=production babel src -d lib --config-file ../../babel.config.json -D"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/react-filerobot-image-editor/src/actions/setLatestColor.js b/packages/react-filerobot-image-editor/src/actions/setLatestColor.js
index e242d130..667f7fe5 100644
--- a/packages/react-filerobot-image-editor/src/actions/setLatestColor.js
+++ b/packages/react-filerobot-image-editor/src/actions/setLatestColor.js
@@ -1,11 +1,11 @@
 export const SET_LATEST_COLOR = 'SET_LATEST_COLOR';
 
-const setLatestColor = (state, payload) =>
-  state.latestColor === payload.latestColor
-    ? state
-    : {
-        ...state,
-        latestColor: payload.latestColor,
-      };
+const setLatestColor = (state, payload) => ({
+  ...state,
+  latestColors: {
+    ...state.latestColors,
+    ...payload.latestColors,
+  },
+});
 
 export default setLatestColor;
diff --git a/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx b/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx
index bc779114..f2d78e01 100644
--- a/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx
+++ b/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/AnnotationNodes/MemoizedAnnotation.jsx
@@ -11,6 +11,7 @@ const MemoizedAnnotation = ({
   selectionsIds,
 }) => {
   const AnnotationComponent = ANNOTATION_NAMES_TO_COMPONENT[annotation.name];
+  if (!AnnotationComponent) return null;
 
   return (
     <AnnotationComponent
diff --git a/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx b/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx
index 06a532ee..79599681 100644
--- a/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx
+++ b/packages/react-filerobot-image-editor/src/components/Layers/DesignLayer/index.jsx
@@ -15,6 +15,7 @@ import AnnotationNodes from './AnnotationNodes';
 import PreviewGroup from './PreviewGroup';
 
 const CANVAS_TO_IMG_SPACING = getProperImageToCanvasSpacing();
+const MIN_SPACED_WIDTH = 10; // As sometimes the spaced width is less than that and it might be hard to view the image initially.
 
 const DesignLayer = () => {
   const designLayerRef = useRef();
@@ -43,7 +44,10 @@ const DesignLayer = () => {
   );
 
   const spacedOriginalImg = useMemo(() => {
-    const spacedWidth = originalImage.width - CANVAS_TO_IMG_SPACING;
+    const spacedWidth = Math.max(
+      MIN_SPACED_WIDTH,
+      originalImage.width - CANVAS_TO_IMG_SPACING,
+    );
     const imgRatio = originalImage.width / originalImage.height;
 
     return {
diff --git a/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx b/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx
index c87ec1ed..2d2d16a6 100644
--- a/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx
+++ b/packages/react-filerobot-image-editor/src/components/MainCanvas/index.jsx
@@ -1,5 +1,5 @@
 /** External Dependencies */
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 /** Internal Dependencies */
 import { DesignLayer, TransformersLayer } from 'components/Layers';
@@ -13,6 +13,7 @@ import { CanvasContainer, StyledOrignalImage } from './MainCanvas.styled';
 const MainCanvas = () => {
   const [observeResize] = useResizeObserver();
   const providedAppContext = useStore();
+  const canvasContainerRef = useRef(null);
 
   const setNewCanvasSize = useCallback(
     ({ width: containerWidth, height: containerHeight }) => {
@@ -27,15 +28,12 @@ const MainCanvas = () => {
     [],
   );
 
-  const observeCanvasContainerResizing = useCallback((element) => {
-    observeResize(element, setNewCanvasSize);
+  useEffect(() => {
+    observeResize(canvasContainerRef.current, setNewCanvasSize);
   }, []);
 
   return (
-    <CanvasContainer
-      className="FIE_canvas-container"
-      ref={observeCanvasContainerResizing}
-    >
+    <CanvasContainer className="FIE_canvas-container" ref={canvasContainerRef}>
       {!providedAppContext.textIdOfEditableContent && <NodeControls />}
       {providedAppContext.isShowOriginalImage && (
         <StyledOrignalImage
diff --git a/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx b/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx
index efb06791..bd3f4625 100644
--- a/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx
+++ b/packages/react-filerobot-image-editor/src/components/Topbar/SaveButton.jsx
@@ -267,7 +267,7 @@ const SaveButton = () => {
             onChange={changeFileName}
             size="sm"
             placeholder={t('name')}
-            error={Boolean(imageFileInfo.name)}
+            error={!imageFileInfo.name}
             focusOnMount
           />
           <StyledFileExtensionSelect
diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/ShadowFields.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/ShadowFields.jsx
index f9bbf579..5d110bdb 100644
--- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/ShadowFields.jsx
+++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/ShadowFields.jsx
@@ -84,7 +84,11 @@ const ShadowFields = ({ annotation, updateAnnotation, t }) => {
           />
         </StyledColumn>
       </StyledTwoColumnsContainer>
-      <ColorInput color={shadowColor} onChange={changeShadowColor} />
+      <ColorInput
+        color={shadowColor}
+        onChange={changeShadowColor}
+        colorFor="shadow"
+      />
     </StyledSpacedOptionFields>
   );
 };
diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx
index 1f6af340..b25ff3ab 100644
--- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx
+++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/StrokeFields.jsx
@@ -37,7 +37,11 @@ const StrokeFields = ({ annotation, updateAnnotation, t }) => {
         onChange={changeStrokeWidth}
         value={strokeWidth}
       />
-      <ColorInput color={stroke} onChange={changeStrokeColor} />
+      <ColorInput
+        color={stroke}
+        onChange={changeStrokeColor}
+        colorFor="stroke"
+      />
     </StyledSpacedOptionFields>
   );
 };
diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx
index 231240dc..8f061101 100644
--- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx
+++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx
@@ -97,7 +97,11 @@ const AnnotationOptions = ({
       className={`FIE_annotations-options${className ? ` ${className}` : ''}`}
     >
       {!hideFillOption && (
-        <ColorInput color={annotation.fill} onChange={changeAnnotationFill} />
+        <ColorInput
+          color={annotation.fill}
+          onChange={changeAnnotationFill}
+          colorFor="fill"
+        />
       )}
       {children}
       {options.map(
@@ -149,8 +153,8 @@ AnnotationOptions.propTypes = {
   updateAnnotation: PropTypes.func.isRequired,
   children: PropTypes.node,
   hideFillOption: PropTypes.bool,
-  morePoppableOptionsPrepended: PropTypes.arrayOf(PropTypes.object),
-  morePoppableOptionsAppended: PropTypes.arrayOf(PropTypes.object),
+  morePoppableOptionsPrepended: PropTypes.arrayOf(PropTypes.instanceOf(Object)),
+  morePoppableOptionsAppended: PropTypes.arrayOf(PropTypes.instanceOf(Object)),
   moreOptionsPopupComponentsObj: PropTypes.instanceOf(Object),
   hidePositionField: PropTypes.bool,
   className: PropTypes.string,
diff --git a/packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx b/packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx
index e59ce3aa..3e0d6e6c 100644
--- a/packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx
+++ b/packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx
@@ -10,13 +10,15 @@ import { StyledColorPicker, StyledPickerTrigger } from './ColorInput.styled';
 
 const pinnedColorsKey = 'FIE_pinnedColors';
 
-const ColorInput = ({ position = 'top', onChange, color }) => {
+// colorFor is used to save the latest color for a specific purpose (e.g. fill/shadow/stroke)
+const ColorInput = ({ position = 'top', onChange, color, colorFor }) => {
   const {
     selectionsIds = [],
     config: { annotationsCommon = {} },
     dispatch,
-    latestColor,
+    latestColors = {},
   } = useStore();
+  const latestColor = latestColors[colorFor];
   const [anchorEl, setAnchorEl] = useState();
   const [currentColor, setCurrentColor] = useState(
     () => latestColor || color || annotationsCommon.fill,
@@ -53,7 +55,9 @@ const ColorInput = ({ position = 'top', onChange, color }) => {
       dispatch({
         type: SET_LATEST_COLOR,
         payload: {
-          latestColor: rgba,
+          latestColors: {
+            [colorFor]: rgba,
+          },
         },
       });
     }
@@ -104,6 +108,7 @@ ColorInput.defaultProps = {
 
 ColorInput.propTypes = {
   onChange: PropTypes.func.isRequired,
+  colorFor: PropTypes.string.isRequired,
   position: PropTypes.string,
   color: PropTypes.string,
 };
diff --git a/packages/react-filerobot-image-editor/src/components/tools/Filters/FilterItem.jsx b/packages/react-filerobot-image-editor/src/components/tools/Filters/FilterItem.jsx
index 54d8c4d8..da422c6f 100644
--- a/packages/react-filerobot-image-editor/src/components/tools/Filters/FilterItem.jsx
+++ b/packages/react-filerobot-image-editor/src/components/tools/Filters/FilterItem.jsx
@@ -10,8 +10,8 @@ import {
   FilterItemLabel,
 } from './Filters.styled';
 
-const FILTER_PREVIEW_WIDTH = 60;
-const FILTER_PREVIEW_HEIGHT = 45;
+const MAX_FILTER_PREVIEW_WIDTH = 60;
+const MAX_FILTER_PREVIEW_HEIGHT = 45;
 
 const FilterItem = ({
   filterLabel,
@@ -43,6 +43,15 @@ const FilterItem = ({
     };
   }, [image]);
 
+  const imgRatio = image.width / image.height;
+  const isVerticalImg = imgRatio < 1;
+  const filterImgPreviewWidth = isVerticalImg
+    ? MAX_FILTER_PREVIEW_WIDTH
+    : MAX_FILTER_PREVIEW_HEIGHT * imgRatio;
+  const filterImgPreviewHeight = isVerticalImg
+    ? MAX_FILTER_PREVIEW_WIDTH / imgRatio
+    : MAX_FILTER_PREVIEW_HEIGHT;
+
   return (
     <StyledFilterItem
       className="FIE_filters-item"
@@ -51,17 +60,17 @@ const FilterItem = ({
     >
       <FilterItemPreview
         className="FIE_filters-item-preview"
-        width={FILTER_PREVIEW_WIDTH}
-        height={FILTER_PREVIEW_HEIGHT}
+        width={MAX_FILTER_PREVIEW_WIDTH}
+        height={MAX_FILTER_PREVIEW_HEIGHT}
       >
         <Layer onTap={handleFilterApplying}>
           <Image
             image={image}
             filters={filterFn ? [filterFn] : []}
-            width={FILTER_PREVIEW_WIDTH}
-            height={FILTER_PREVIEW_HEIGHT}
-            x={0}
-            y={0}
+            width={filterImgPreviewWidth}
+            height={filterImgPreviewHeight}
+            x={-(filterImgPreviewWidth - MAX_FILTER_PREVIEW_WIDTH) / 2}
+            y={-(filterImgPreviewHeight - MAX_FILTER_PREVIEW_HEIGHT) / 2}
             ref={imageNodeRef}
           />
         </Layer>
diff --git a/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx b/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx
index f6caccdd..ee7bd8ba 100644
--- a/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx
+++ b/packages/react-filerobot-image-editor/src/components/tools/Pen/PenOptions.jsx
@@ -43,7 +43,7 @@ const PenOptions = ({ t }) => {
       pos.offsetX - (designLayer.attrs.xPadding || 0),
       pos.offsetY - (designLayer.attrs.yPadding || 0),
     ];
-  }, []);
+  }, [designLayer]);
 
   const handlePointerMove = useCallback(() => {
     if (!updatedPen.current.moved) {
@@ -72,7 +72,7 @@ const PenOptions = ({ t }) => {
         },
       });
     }
-  }, []);
+  }, [getPointerPosition]);
 
   const handlePointerUp = useCallback(() => {
     if (updatedPen.current.id) {
@@ -91,23 +91,26 @@ const PenOptions = ({ t }) => {
     document.removeEventListener('touchend', handlePointerUp, eventsOptions);
     document.removeEventListener('mouseleave', handlePointerUp, eventsOptions);
     document.removeEventListener('touchcancel', handlePointerUp, eventsOptions);
-  }, []);
+  }, [handlePointerMove]);
 
-  const handlePointerDown = useCallback((e) => {
-    if (e.target.attrs.draggable) {
-      return;
-    }
-    e.evt.preventDefault();
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (e.target.attrs.draggable) {
+        return;
+      }
+      e.evt.preventDefault();
 
-    updatedPen.current = { points: getPointerPosition() };
+      updatedPen.current = { points: getPointerPosition() };
 
-    canvasRef.current.on('mousemove touchmove', handlePointerMove);
-    canvasRef.current.on('mouseleave touchcancel', handlePointerUp);
-    document.addEventListener('mouseup', handlePointerUp, eventsOptions);
-    document.addEventListener('touchend', handlePointerUp, eventsOptions);
-    document.addEventListener('mouseleave', handlePointerUp, eventsOptions);
-    document.addEventListener('touchcancel', handlePointerUp, eventsOptions);
-  }, []);
+      canvasRef.current.on('mousemove touchmove', handlePointerMove);
+      canvasRef.current.on('mouseleave touchcancel', handlePointerUp);
+      document.addEventListener('mouseup', handlePointerUp, eventsOptions);
+      document.addEventListener('touchend', handlePointerUp, eventsOptions);
+      document.addEventListener('mouseleave', handlePointerUp, eventsOptions);
+      document.addEventListener('touchcancel', handlePointerUp, eventsOptions);
+    },
+    [getPointerPosition, handlePointerMove, handlePointerUp],
+  );
 
   useEffect(() => {
     canvasRef.current = designLayer?.getStage();
@@ -120,7 +123,7 @@ const PenOptions = ({ t }) => {
         canvasRef.current.off('mousedown touchstart', handlePointerDown);
       }
     };
-  }, []);
+  }, [designLayer]);
 
   return (
     <AnnotationOptions
diff --git a/packages/react-filerobot-image-editor/src/context/getInitialAppState.js b/packages/react-filerobot-image-editor/src/context/getInitialAppState.js
index a5cb6ab8..74f3324d 100644
--- a/packages/react-filerobot-image-editor/src/context/getInitialAppState.js
+++ b/packages/react-filerobot-image-editor/src/context/getInitialAppState.js
@@ -66,7 +66,7 @@ const getInitialAppState = (config = {}) => {
     futureDesignStates: [],
     isResetted: true,
     haveNotSavedChanges: false,
-    latestColor: undefined,
+    latestColors: {},
   };
 };
 
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Aden.js b/packages/react-filerobot-image-editor/src/custom/filters/Aden.js
index da43e910..cd27e8b8 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Aden.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Aden.js
@@ -27,4 +27,6 @@ function Aden(imageData) {
   }
 }
 
+Aden.filterName = 'Aden'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Aden;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Amaro.js b/packages/react-filerobot-image-editor/src/custom/filters/Amaro.js
index 2fb6cd91..104fef3f 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Amaro.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Amaro.js
@@ -28,4 +28,6 @@ function Amaro(imageData) {
   }
 }
 
+Amaro.filterName = 'Amaro'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Amaro;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Ashby.js b/packages/react-filerobot-image-editor/src/custom/filters/Ashby.js
index 036161fe..2b177f14 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Ashby.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Ashby.js
@@ -28,4 +28,6 @@ function Ashby(imageData) {
   }
 }
 
+Ashby.filterName = 'Ashby'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Ashby;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/BlackAndWhite.js b/packages/react-filerobot-image-editor/src/custom/filters/BlackAndWhite.js
index 53b2d9a7..d2ec812d 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/BlackAndWhite.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/BlackAndWhite.js
@@ -21,4 +21,6 @@ function BlackAndWhite(imageData) {
   }
 }
 
+BlackAndWhite.filterName = 'BlackAndWhite'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default BlackAndWhite;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Brannan.js b/packages/react-filerobot-image-editor/src/custom/filters/Brannan.js
index 9bde68f1..27b5d103 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Brannan.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Brannan.js
@@ -28,4 +28,6 @@ function Brannan(imageData) {
   }
 }
 
+Brannan.filterName = 'Brannan'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Brannan;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Brooklyn.js b/packages/react-filerobot-image-editor/src/custom/filters/Brooklyn.js
index dcdd3c31..9295e80a 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Brooklyn.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Brooklyn.js
@@ -28,4 +28,6 @@ function Brooklyn(imageData) {
   }
 }
 
+Brooklyn.filterName = 'Brooklyn'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Brooklyn;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Charmes.js b/packages/react-filerobot-image-editor/src/custom/filters/Charmes.js
index 45231a26..54945a31 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Charmes.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Charmes.js
@@ -28,4 +28,6 @@ function Charmes(imageData) {
   }
 }
 
+Charmes.filterName = 'Charmes'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Charmes;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Clarendon.js b/packages/react-filerobot-image-editor/src/custom/filters/Clarendon.js
index 473c2ce3..1df5ed5b 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Clarendon.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Clarendon.js
@@ -34,4 +34,6 @@ function Clarendon(imageData) {
   }
 }
 
+Clarendon.filterName = 'Clarendon'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Clarendon;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Crema.js b/packages/react-filerobot-image-editor/src/custom/filters/Crema.js
index 27cfb0c2..cb852ff4 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Crema.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Crema.js
@@ -27,4 +27,6 @@ function Crema(imageData) {
   }
 }
 
+Crema.filterName = 'Crema'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Crema;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Dogpatch.js b/packages/react-filerobot-image-editor/src/custom/filters/Dogpatch.js
index a8ae30d4..e12d0994 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Dogpatch.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Dogpatch.js
@@ -28,4 +28,6 @@ function Dogpatch(imageData) {
   }
 }
 
+Dogpatch.filterName = 'Dogpatch'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Dogpatch;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Earlybird.js b/packages/react-filerobot-image-editor/src/custom/filters/Earlybird.js
index bc0f4b59..08131e84 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Earlybird.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Earlybird.js
@@ -22,4 +22,6 @@ function Earlybird(imageData) {
   }
 }
 
+Earlybird.filterName = 'Earlybird'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Earlybird;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Gingham.js b/packages/react-filerobot-image-editor/src/custom/filters/Gingham.js
index 5252ede6..3f196075 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Gingham.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Gingham.js
@@ -28,4 +28,6 @@ function Gingham(imageData) {
   }
 }
 
+Gingham.filterName = 'Gingham'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Gingham;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Ginza.js b/packages/react-filerobot-image-editor/src/custom/filters/Ginza.js
index cc5c0e5e..0da2494f 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Ginza.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Ginza.js
@@ -28,4 +28,6 @@ function Ginza(imageData) {
   }
 }
 
+Ginza.filterName = 'Ginza'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Ginza;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Hefe.js b/packages/react-filerobot-image-editor/src/custom/filters/Hefe.js
index bc470b7b..e8f8308d 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Hefe.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Hefe.js
@@ -28,4 +28,6 @@ function Hefe(imageData) {
   }
 }
 
+Hefe.filterName = 'Hefe'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Hefe;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Helena.js b/packages/react-filerobot-image-editor/src/custom/filters/Helena.js
index c28ebbea..ab372576 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Helena.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Helena.js
@@ -28,4 +28,6 @@ function Helena(imageData) {
   }
 }
 
+Helena.filterName = 'Helena'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Helena;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Hudson.js b/packages/react-filerobot-image-editor/src/custom/filters/Hudson.js
index 38599027..22dd26ef 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Hudson.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Hudson.js
@@ -34,4 +34,6 @@ function Hudson(imageData) {
   }
 }
 
+Hudson.filterName = 'Hudson'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Hudson;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Juno.js b/packages/react-filerobot-image-editor/src/custom/filters/Juno.js
index ef700e16..45fe97c4 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Juno.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Juno.js
@@ -27,4 +27,6 @@ function Juno(imageData) {
   }
 }
 
+Juno.filterName = 'Juno'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Juno;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Kelvin.js b/packages/react-filerobot-image-editor/src/custom/filters/Kelvin.js
index b250e042..e300eb15 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Kelvin.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Kelvin.js
@@ -34,4 +34,6 @@ function Kelvin(imageData) {
   }
 }
 
+Kelvin.filterName = 'Kelvin'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Kelvin;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Lark.js b/packages/react-filerobot-image-editor/src/custom/filters/Lark.js
index 616275c1..fc9ea2bf 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Lark.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Lark.js
@@ -34,4 +34,6 @@ function Lark(imageData) {
   }
 }
 
+Lark.filterName = 'Lark'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Lark;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/LoFi.js b/packages/react-filerobot-image-editor/src/custom/filters/LoFi.js
index 0c92cbcb..107bc2db 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/LoFi.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/LoFi.js
@@ -28,4 +28,6 @@ function LoFi(imageData) {
   }
 }
 
+LoFi.filterName = 'LoFi'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default LoFi;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Ludwig.js b/packages/react-filerobot-image-editor/src/custom/filters/Ludwig.js
index cd7fe17b..22f6e6f3 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Ludwig.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Ludwig.js
@@ -28,4 +28,6 @@ function Ludwig(imageData) {
   }
 }
 
+Ludwig.filterName = 'Ludwig'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Ludwig;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Maven.js b/packages/react-filerobot-image-editor/src/custom/filters/Maven.js
index 855f0bc0..04089cb4 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Maven.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Maven.js
@@ -34,4 +34,6 @@ function Maven(imageData) {
   }
 }
 
+Maven.filterName = 'Maven'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Maven;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Mayfair.js b/packages/react-filerobot-image-editor/src/custom/filters/Mayfair.js
index 1a39af40..05072c13 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Mayfair.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Mayfair.js
@@ -27,4 +27,6 @@ function Mayfair(imageData) {
   }
 }
 
+Mayfair.filterName = 'Mayfair'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Mayfair;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Moon.js b/packages/react-filerobot-image-editor/src/custom/filters/Moon.js
index be6b4fea..d0e0ef43 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Moon.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Moon.js
@@ -27,4 +27,6 @@ function Moon(imageData) {
   }
 }
 
+Moon.filterName = 'Moon'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Moon;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Nashville.js b/packages/react-filerobot-image-editor/src/custom/filters/Nashville.js
index 051d4c1b..dce2ebc9 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Nashville.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Nashville.js
@@ -28,4 +28,6 @@ function Nashville(imageData) {
   }
 }
 
+Nashville.filterName = 'Nashville'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Nashville;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/NinteenSeventySeven.js b/packages/react-filerobot-image-editor/src/custom/filters/NinteenSeventySeven.js
index 2c50f031..86330e39 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/NinteenSeventySeven.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/NinteenSeventySeven.js
@@ -28,4 +28,6 @@ function NinteenSeventySeven(imageData) {
   }
 }
 
+NinteenSeventySeven.filterName = 'NinteenSeventySeven'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default NinteenSeventySeven;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Perpetua.js b/packages/react-filerobot-image-editor/src/custom/filters/Perpetua.js
index 938194c3..20fdcce2 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Perpetua.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Perpetua.js
@@ -22,4 +22,6 @@ function Perpetua(imageData) {
   }
 }
 
+Perpetua.filterName = 'Perpetua'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Perpetua;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Reyes.js b/packages/react-filerobot-image-editor/src/custom/filters/Reyes.js
index 9cc6dcfd..18369f9f 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Reyes.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Reyes.js
@@ -34,4 +34,6 @@ function Reyes(imageData) {
   }
 }
 
+Reyes.filterName = 'Reyes'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Reyes;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Rise.js b/packages/react-filerobot-image-editor/src/custom/filters/Rise.js
index 27434321..07775a78 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Rise.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Rise.js
@@ -34,4 +34,6 @@ function Rise(imageData) {
   }
 }
 
+Rise.filterName = 'Rise'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Rise;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Sierra.js b/packages/react-filerobot-image-editor/src/custom/filters/Sierra.js
index 4e0f2d95..365f3482 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Sierra.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Sierra.js
@@ -28,4 +28,6 @@ function Sierra(imageData) {
   }
 }
 
+Sierra.filterName = 'Sierra'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Sierra;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Skyline.js b/packages/react-filerobot-image-editor/src/custom/filters/Skyline.js
index b618f3c0..d9c4cf4b 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Skyline.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Skyline.js
@@ -28,4 +28,6 @@ function Skyline(imageData) {
   }
 }
 
+Skyline.filterName = 'Skyline'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Skyline;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Slumber.js b/packages/react-filerobot-image-editor/src/custom/filters/Slumber.js
index 50cc75d8..7ae8a2c4 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Slumber.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Slumber.js
@@ -28,4 +28,6 @@ function Slumber(imageData) {
   }
 }
 
+Slumber.filterName = 'Slumber'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Slumber;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Stinson.js b/packages/react-filerobot-image-editor/src/custom/filters/Stinson.js
index 87914981..ba2aedc3 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Stinson.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Stinson.js
@@ -28,4 +28,6 @@ function Stinson(imageData) {
   }
 }
 
+Stinson.filterName = 'Stinson'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Stinson;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Sutro.js b/packages/react-filerobot-image-editor/src/custom/filters/Sutro.js
index ef8ea43f..812d4b20 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Sutro.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Sutro.js
@@ -28,4 +28,6 @@ function Sutro(imageData) {
   }
 }
 
+Sutro.filterName = 'Sutro'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Sutro;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Toaster.js b/packages/react-filerobot-image-editor/src/custom/filters/Toaster.js
index bd3057b3..d44afff5 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Toaster.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Toaster.js
@@ -28,4 +28,6 @@ function Toaster(imageData) {
   }
 }
 
+Toaster.filterName = 'Toaster'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Toaster;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Valencia.js b/packages/react-filerobot-image-editor/src/custom/filters/Valencia.js
index 7569b964..5dd4f59a 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Valencia.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Valencia.js
@@ -34,4 +34,6 @@ function Valencia(imageData) {
   }
 }
 
+Valencia.filterName = 'Valencia'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Valencia;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Vesper.js b/packages/react-filerobot-image-editor/src/custom/filters/Vesper.js
index d42d3ac7..3f78efb3 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Vesper.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Vesper.js
@@ -34,4 +34,6 @@ function Vesper(imageData) {
   }
 }
 
+Vesper.filterName = 'Vesper'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Vesper;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Walden.js b/packages/react-filerobot-image-editor/src/custom/filters/Walden.js
index 4e894f06..2491b238 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Walden.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Walden.js
@@ -28,4 +28,6 @@ function Walden(imageData) {
   }
 }
 
+Walden.filterName = 'Walden'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Walden;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/Willow.js b/packages/react-filerobot-image-editor/src/custom/filters/Willow.js
index 942d2fd3..9306bb93 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/Willow.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/Willow.js
@@ -34,4 +34,6 @@ function Willow(imageData) {
   }
 }
 
+Willow.filterName = 'Willow'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Willow;
diff --git a/packages/react-filerobot-image-editor/src/custom/filters/XPro2.js b/packages/react-filerobot-image-editor/src/custom/filters/XPro2.js
index 89ca5666..d6e9f011 100644
--- a/packages/react-filerobot-image-editor/src/custom/filters/XPro2.js
+++ b/packages/react-filerobot-image-editor/src/custom/filters/XPro2.js
@@ -34,4 +34,6 @@ function XPro2(imageData) {
   }
 }
 
+XPro2.filterName = 'XPro2'; // We assign the filter name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default XPro2;
diff --git a/packages/react-filerobot-image-editor/src/custom/finetunes/CustomThreshold.js b/packages/react-filerobot-image-editor/src/custom/finetunes/CustomThreshold.js
index 9bff2e32..a55e36be 100644
--- a/packages/react-filerobot-image-editor/src/custom/finetunes/CustomThreshold.js
+++ b/packages/react-filerobot-image-editor/src/custom/finetunes/CustomThreshold.js
@@ -27,6 +27,8 @@ function CustomThreshold(imageData) {
   }
 }
 
+CustomThreshold.finetuneName = 'CustomThreshold'; // We assign the finetune name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default CustomThreshold;
 
 /**
diff --git a/packages/react-filerobot-image-editor/src/custom/finetunes/Warmth.js b/packages/react-filerobot-image-editor/src/custom/finetunes/Warmth.js
index 3c2a3381..097c96a9 100644
--- a/packages/react-filerobot-image-editor/src/custom/finetunes/Warmth.js
+++ b/packages/react-filerobot-image-editor/src/custom/finetunes/Warmth.js
@@ -27,6 +27,8 @@ function Warmth(imageData) {
   }
 }
 
+Warmth.finetuneName = 'Warmth'; // We assign the finetune name here instead of using the fn. name as on prod. code the fn. name is optimized that might cause bug in that case.
+
 export default Warmth;
 
 /**
diff --git a/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js b/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js
index 5519d7fd..9ca76796 100644
--- a/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js
+++ b/packages/react-filerobot-image-editor/src/hooks/useTransformedImgData.js
@@ -185,10 +185,12 @@ const useTransformedImgData = () => {
       },
     };
     if (finalImgDesignState.filter) {
-      finalImgDesignState.filter = finalImgDesignState.filter.name;
+      finalImgDesignState.filter =
+        finalImgDesignState.filter.filterName ||
+        finalImgDesignState.filter.name;
     }
     finalImgDesignState.finetunes = finalImgDesignState.finetunes.map(
-      (finetuneFn) => finetuneFn.name,
+      (finetuneFn) => finetuneFn.finetuneName || finetuneFn.name,
     );
     Object.keys(finalImgDesignState.annotations).forEach((k) => {
       const annotation = finalImgDesignState.annotations[k];
diff --git a/packages/react-filerobot-image-editor/src/index.d.ts b/packages/react-filerobot-image-editor/src/index.d.ts
index 0ddf7438..280a47a9 100644
--- a/packages/react-filerobot-image-editor/src/index.d.ts
+++ b/packages/react-filerobot-image-editor/src/index.d.ts
@@ -282,7 +282,7 @@ export interface FilerobotImageEditorConfig {
   onClose?: (closeReason: closingReasons, haveNotSavedChanges: boolean) => void;
   closeAfterSave?: boolean;
   defaultSavedImageName?: string;
-  defaultSavedImageType?: 'png' | 'jpeg' | 'webp';
+  defaultSavedImageType?: 'png' | 'jpeg' | 'jpg' | 'webp';
   forceToPngInEllipticalCrop?: boolean;
   useBackendTranslations?: boolean;
   translations?: object;
diff --git a/packages/react-filerobot-image-editor/src/utils/loadImage.js b/packages/react-filerobot-image-editor/src/utils/loadImage.js
index b4c0cac7..e8cd80c6 100644
--- a/packages/react-filerobot-image-editor/src/utils/loadImage.js
+++ b/packages/react-filerobot-image-editor/src/utils/loadImage.js
@@ -3,8 +3,8 @@ import extractNameFromUrl from './extractNameFromUrl';
 const loadImage = (imageSrc, imageFileName) =>
   new Promise((resolve, reject) => {
     const imageElement = new Image();
-    imageElement.src = imageSrc;
     imageElement.crossOrigin = 'Anonymous';
+    imageElement.src = imageSrc;
     imageElement.name = imageFileName ?? extractNameFromUrl(imageSrc);
     imageElement.onload = () => {
       resolve(imageElement);
diff --git a/packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js b/packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js
index 5860fff5..470d9dee 100644
--- a/packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js
+++ b/packages/react-filerobot-image-editor/src/utils/operationsToCloudimageUrl.js
@@ -112,7 +112,8 @@ const generateFinetuneQuery = (finetunes, finetunesProps = {}) => {
   const queryParams = [];
   finetunes.forEach((finetuneFn) => {
     const finetuneParamInfo =
-      finetuneFn.name && finetuneNameToParamInfo[finetuneFn.name];
+      (finetuneFn.finetuneName || finetuneFn.name) &&
+      finetuneNameToParamInfo[finetuneFn.finetuneName || finetuneFn.name];
     if (finetuneParamInfo) {
       const finetuneCloudimageVal = toPrecisedFloat(
         mapNumber(
diff --git a/yarn.lock b/yarn.lock
index 1b51b690..eddb44f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2023,23 +2023,23 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@scaleflex/icons@1.0.0-beta.80":
-  version "1.0.0-beta.80"
-  resolved "https://registry.yarnpkg.com/@scaleflex/icons/-/icons-1.0.0-beta.80.tgz#7fc7e1d32fdbf54a1b5150c1b8b63f995a292d1c"
-  integrity sha512-QUPwFDmFNlE3GZ5kcr5Fp3KzetcG4FQyOYO76vPi9v0h/+gr9NKfLDhx5AI72XHZrVdp42I4Mu17jGREQy2Q6A==
+"@scaleflex/icons@1.0.0-beta.99":
+  version "1.0.0-beta.99"
+  resolved "https://registry.yarnpkg.com/@scaleflex/icons/-/icons-1.0.0-beta.99.tgz#4af7e7196206b33a518d7ec6210f093f8d79fcdf"
+  integrity sha512-LXFn0/7jbtCxv90yO7dt7Mx/n9f5Fvl9bovf8HABFX1Y2V4Iw+egdnm6LGt+fbl61lq7Ea8aFCr/YKH4jmGpvw==
 
-"@scaleflex/icons@^1.0.0-beta.80":
-  version "1.0.0-beta.91"
-  resolved "https://registry.yarnpkg.com/@scaleflex/icons/-/icons-1.0.0-beta.91.tgz#e132f72162875e12dbdee8629ca5239d6efb0b3b"
-  integrity sha512-JsCSr8WH8n+xrlErujgtEwVdJ9iBjXnh6dvt5LjvUaUtcwL6jdjRlcfb5m3SpdrGXGKwEZfDEaFZVGia1OeemA==
+"@scaleflex/icons@^1.0.0-beta.99":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@scaleflex/icons/-/icons-1.0.0.tgz#e7981adae514ef29e8ead9e3b2113a6c8a91aa6c"
+  integrity sha512-8NZ+9sSBZPjhBZPz0k+7BrhN1LPNqHwmdeHt9XD4K8aR6EDPwIg9WCHXLLSsivEGXBNaiVZ/4KkMqa3wau2eRg==
 
-"@scaleflex/ui@1.0.0-beta.80":
-  version "1.0.0-beta.80"
-  resolved "https://registry.yarnpkg.com/@scaleflex/ui/-/ui-1.0.0-beta.80.tgz#4df46acbbadebef91ab78a80bb763f637c1f4756"
-  integrity sha512-h4IiShDPcg4F+dLb7Fw6Xk1KmMWTm/NJzJaSeQ84ysCFquFrDgJKs5WKQ0yn/pdnCQfdec4801ACVpybqmA8UQ==
+"@scaleflex/ui@1.0.0-beta.99":
+  version "1.0.0-beta.99"
+  resolved "https://registry.yarnpkg.com/@scaleflex/ui/-/ui-1.0.0-beta.99.tgz#f9d09bd8ecc8ed3b400902cb95153635bf12c828"
+  integrity sha512-PglsU+2xHI7MYiLS9BNbPacXTbsc+Nvj7/p0fQ37E9mhJiM2/rRKCJG4YiyDQRpnc9VjyOIF12GDvHAmiFnrCQ==
   dependencies:
     "@popperjs/core" "^2.6.0"
-    "@scaleflex/icons" "^1.0.0-beta.80"
+    "@scaleflex/icons" "^1.0.0-beta.99"
     lodash.merge "^4.6.2"
     lodash.throttle "^4.1.1"
     polished "^3.6.6"
@@ -2102,6 +2102,22 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
+"@types/react-reconciler@^0.28.0":
+  version "0.28.2"
+  resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.28.2.tgz#f16b0e8cc4748af70ca975eaaace0d79582c71fa"
+  integrity sha512-8tu6lHzEgYPlfDf/J6GOQdIc+gs+S2yAqlby3zTsB3SP2svlqTYe5fwZNtZyfactP74ShooP2vvi1BOp9ZemWw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "18.0.27"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.27.tgz#d9425abe187a00f8a5ec182b010d4fd9da703b71"
+  integrity sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/react@^17.0.37":
   version "17.0.47"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.47.tgz#4ee71aaf4c5a9e290e03aa4d0d313c5d666b3b78"
@@ -5624,6 +5640,13 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
 
+its-fine@^1.0.6:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/its-fine/-/its-fine-1.0.9.tgz#f4ca0ad5bdbf896764d35f7cf24c16287b6c6d31"
+  integrity sha512-Ph+vcp1R100JOM4raXmDx/wCTi4kMkMXiFE108qGzsLdghXFPqad82UJJtqT1jwdyWYkTU6eDpDnol/ZIzW+1g==
+  dependencies:
+    "@types/react-reconciler" "^0.28.0"
+
 jake@^10.8.5:
   version "10.8.5"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
@@ -5785,10 +5808,10 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-konva@8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/konva/-/konva-8.3.2.tgz#3823a6ea0eb3605142c637f327c4cc29fd188c02"
-  integrity sha512-vWi51qFTFkEIp+HxMek1eH1fA1zFo0DPD3uqUez+v2gy/IfZF2eLu9DcEj7Exk532hxfHJi/2oZ0GQYHlhg/dQ==
+konva@8.4.2:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/konva/-/konva-8.4.2.tgz#6de2b9d54f2b56b8c7c76eba66955f7255dd9afb"
+  integrity sha512-4VQcrgj/PI8ydJjtLcTuinHBE8o0WGX0YoRwbiN5mpYQiC52aOzJ0XbpKNDJdRvORQphK5LP+jeM0hQJEYIuUA==
 
 language-subtag-registry@~0.3.2:
   version "0.3.22"
@@ -7369,21 +7392,22 @@ react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-konva@18.1.1:
-  version "18.1.1"
-  resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-18.1.1.tgz#f3b7fdfcbd27e183853596362bc9c965c6ddedcd"
-  integrity sha512-oh01+z6pQn9XNP4phRI8CWy8/LnkEZA2tagrvnT3xSt4eRrKeWOQ2eH5f5s5nf937U8hLhVI+kvqPxMBRc4T+g==
+react-konva@18.2.4:
+  version "18.2.4"
+  resolved "https://registry.yarnpkg.com/react-konva/-/react-konva-18.2.4.tgz#f5f63d07bb287d3edf7eee35612282ddc55a6d6f"
+  integrity sha512-cVo0+L8PjUSrSAMLlutwRiI1t8koU4Z6EOsbrWxuXvTwNXG3qd0wFoNBBVGjOQgZX9hqufbK7NEQdfqlKve9jQ==
   dependencies:
-    react-reconciler "~0.28.0"
-    scheduler "^0.22.0"
+    its-fine "^1.0.6"
+    react-reconciler "~0.29.0"
+    scheduler "^0.23.0"
 
-react-reconciler@~0.28.0:
-  version "0.28.0"
-  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.28.0.tgz#52ede33c584c9b6d4c9bea02a53d368c5751c9c9"
-  integrity sha512-sGIHDOpgVjRYgsi8NgosDnbkDvvkYFFSF900ZUhUw0+lSBEA5n76TcKFaVkfYMIuYm+7W6mT8Q673DLBfuTxcQ==
+react-reconciler@~0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.29.0.tgz#ee769bd362915076753f3845822f2d1046603de7"
+  integrity sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.22.0"
+    scheduler "^0.23.0"
 
 react-refresh@^0.13.0:
   version "0.13.0"
@@ -7833,13 +7857,6 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-scheduler@^0.22.0:
-  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
-  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"