diff --git a/client/package-lock.json b/client/package-lock.json
index 8707b02fb..1e4f2072c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -38,6 +38,7 @@
         "i18next": "^23.8.1",
         "i18next-browser-languagedetector": "^7.0.2",
         "jsoneditor": "^10.0.0",
+        "jsonic": "^1.0.1",
         "jsreport-browser-client-dist": "^1.3.0",
         "libphonenumber-js": "^1.10.54",
         "logrocket": "^7.0.0",
@@ -14488,6 +14489,11 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsonic": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/jsonic/-/jsonic-1.0.1.tgz",
+      "integrity": "sha512-6GitEN4plTuB/I1o9kDZl7Pgc+DvFG1BG88IqaUz4eQglCA1uAgxWdXhLNA6ffaYsmzPjOysDpp6CYTwRiuXLw=="
+    },
     "node_modules/jsonpath": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz",
diff --git a/client/package.json b/client/package.json
index 5a47095d7..7b398250e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -34,6 +34,7 @@
     "i18next": "^23.8.1",
     "i18next-browser-languagedetector": "^7.0.2",
     "jsoneditor": "^10.0.0",
+    "jsonic": "^1.0.1",
     "jsreport-browser-client-dist": "^1.3.0",
     "libphonenumber-js": "^1.10.54",
     "logrocket": "^7.0.0",
diff --git a/client/src/components/report-center-modal/test.jsx b/client/src/components/report-center-modal/test.jsx
index 81910c8ba..3aa16db5f 100644
--- a/client/src/components/report-center-modal/test.jsx
+++ b/client/src/components/report-center-modal/test.jsx
@@ -3,6 +3,8 @@ import React, { useEffect, useState } from "react";
 import { fetchFilterData } from "../../utils/RenderTemplate";
 import { DeleteFilled } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
+import jsonic from 'jsonic';
+
 export default function Test({ form }) {
   return (
     <Form.Item style={{ margin: 0, padding: 0 }} dependencies={["key"]}>
@@ -22,7 +24,7 @@ function RenderFilters({ templateId }) {
     const fetch = async () => {
       const data = await fetchFilterData({ name: templateId });
       console.log("🚀 ~ fetch ~ data:", data);
-      setState(JSON.parse(data));
+      setState(jsonic(data));
     };
 
     console.log("🚀 ~ useEffect ~ templateId:", templateId);