extract list item text

src/v3/src/components/List/List.tsx

@@ -15,7 +15,6 @@ import { Typography, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { FunctionComponent, h } from 'preact';
 
 import Logger from '../../../../util/Logger';
-import { useHtmlContentParser } from '../../hooks';
 import {
   ButtonElement,
   DescriptionElement,
@@ -27,6 +26,7 @@ import {
 import { getElementKey } from '../../util';
 import Button from '../Button';
 import InformationalText from '../InformationalText';
+import ListItemText from './ListItemText';
 
 const renderElement = (item: UISchemaElement) => {
   const Container: FunctionComponent = ({ children }) => {
@@ -103,7 +103,7 @@ const List: UISchemaElementComponent<{
               // TODO: OKTA-577905 - (textAlign: 'start') Temporary fix until we can upgrade to the latest version of Odyssey
               sx={{ display: 'list-item', textAlign: 'start' }}
             >
-              {typeof item === 'string' ? useHtmlContentParser(item) : renderLayout(item) }
+              {typeof item === 'string' ? (<ListItemText text={item} />) : renderLayout(item) }
             </ListItem>
           ))
         }

src/v3/src/components/List/ListItemText.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Box } from '@okta/odyssey-react-mui';
+import { FunctionComponent, h } from 'preact';
+
+import { useHtmlContentParser } from '../../hooks';
+
+type ListItemTextProps = {
+  text: string;
+};
+
+const ListItemText: FunctionComponent<ListItemTextProps> = ({ text }) => {
+  const parsedText = useHtmlContentParser(text);
+
+  return (
+    <Box component="span">{ parsedText }</Box>
+  );
+};
+export default ListItemText;