lazyload the old way using state and useEffect

- My previous attempt gave the following sonarqube error:
   Expected non-Promise value in a boolean conditional.

src/Utils/FormattedValue.jsx

@@ -1,11 +1,12 @@
-import React from 'react';
+// FormattedValue.jsx
+
+import React, { useState, useEffect } from 'react';
 import isObject from 'lodash/isObject';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import { CountUp } from '@eeacms/countup';
 import { UniversalLink } from '@plone/volto/components';
 import { isUrl } from '@plone/volto/helpers';
-import { sanitizeHtml } from '../helpers';
 
 const D3 = loadable.lib(() => import('d3'));
 
@@ -34,6 +35,16 @@ const FormattedValue = ({
   animatedCounter,
   link = null,
 }) => {
+  const [sanitizeHtmlModule, setSanitizeHtmlModule] = useState(null);
+
+  useEffect(() => {
+    const loadModule = async () => {
+      const module = await import('sanitize-html');
+      setSanitizeHtmlModule(module);
+    };
+    loadModule();
+  }, []);
+
   const originalValue = value;
   const animateValue = typeof value === 'number' && animatedCounter;
 
@@ -68,7 +79,7 @@ const FormattedValue = ({
           const html =
             isLink && isObject(link) && link.title
               ? link.title
-              : sanitizeHtml(value, {
+              : sanitizeHtmlModule(value, {
                   allowedAttributes: {
                     span: ['id'],
                   },

src/helpers.js

@@ -386,18 +386,3 @@ export const getFilteredURL = (url, connected_data_parameters = []) => {
   }
   return decodedURL;
 };
-
-/**
- * Sanitizes the given HTML value using the `sanitize-html` library.
- *
- * @param {string} value - The HTML value to be sanitized.
- * @param {object} allowedAttributes - An object specifying the allowed attributes for the sanitized HTML.
- * @returns {Promise<string>} - The sanitized HTML value.
- */
-export const sanitizeHtml = async (value, allowedAttributes) => {
-  const sanitized = await import('sanitize-html');
-  const result = sanitized.default(value, {
-    ...allowedAttributes,
-  });
-  return result;
-};

src/helpers.test.js

@@ -697,67 +697,4 @@ describe('getFilteredURL', () => {
     const expectedUrl = 'value1';
     expect(getFilteredURL(url, connected_data_parameters)).toBe(expectedUrl);
   });
-
-  describe('sanitizeHtml', () => {
-    it('sanitizes HTML with allowed attributes', async () => {
-      const value = '<div><a href="https://example.com">Link</a></div>';
-      const allowedAttributes = {
-        allowedTags: ['a'],
-        allowedAttributes: { a: ['href'] },
-      };
-
-      const result = await sanitizeHtml(value, allowedAttributes);
-
-      expect(result).toBe('<a href="https://example.com">Link</a>');
-    });
-
-    it('removes disallowed attributes', async () => {
-      const value =
-        '<div><a href="https://example.com" target="_blank">Link</a></div>';
-      const allowedAttributes = {
-        allowedTags: ['a'],
-        allowedAttributes: { a: ['href'] },
-      };
-
-      const result = await sanitizeHtml(value, allowedAttributes);
-
-      expect(result).toBe('<a href="https://example.com">Link</a>');
-    });
-
-    it('removes disallowed tags', async () => {
-      const value = '<div><a href="https://example.com">Link</a></div>';
-      const allowedAttributes = {
-        allowedTags: ['b'],
-        allowedAttributes: { b: [] },
-      };
-
-      const result = await sanitizeHtml(value, allowedAttributes);
-
-      expect(result).toBe('Link');
-    });
-
-    it('returns empty string for empty input', async () => {
-      const value = '';
-      const allowedAttributes = {
-        allowedTags: ['a'],
-        allowedAttributes: { a: ['href'] },
-      };
-
-      const result = await sanitizeHtml(value, allowedAttributes);
-
-      expect(result).toBe('');
-    });
-
-    it('returns the same string if no sanitization is needed', async () => {
-      const value = '<a href="https://example.com">Link</a>';
-      const allowedAttributes = {
-        allowedTags: ['a'],
-        allowedAttributes: { a: ['href'] },
-      };
-
-      const result = await sanitizeHtml(value, allowedAttributes);
-
-      expect(result).toBe('<a href="https://example.com">Link</a>');
-    });
-  });
 });