diff --git a/package-lock.json b/package-lock.json
index c73bac8a94..c5a2b53613 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23439,6 +23439,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -34302,7 +34303,6 @@
         "@docusaurus/preset-classic": "^2.4.3",
         "@mdx-js/react": "^1.6.22",
         "ajv": "^8.12.0",
-        "clsx": "^1.2.1",
         "prism-react-renderer": "^1.3.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -34764,6 +34764,7 @@
         "jsonpointer": "^5.0.1",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
+        "nanoid": "^3.3.7",
         "react-is": "^18.2.0"
       },
       "devDependencies": {
diff --git a/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx
index 3dc5c12910..0d3565112a 100644
--- a/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx
+++ b/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx
@@ -1,6 +1,6 @@
 import { Button, Col, Row } from 'antd';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getUiOptions,
   getTemplate,
@@ -24,7 +24,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, buttonsProps, hasToolbar, index, registry, uiSchema } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
diff --git a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx
index 5af3dc5f56..b3d454b059 100644
--- a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx
+++ b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx
@@ -2,7 +2,7 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   GenericObjectType,
   RJSFSchema,
@@ -100,7 +100,7 @@ export default function ArrayFieldTemplate<
         )}
         <Col className='row array-item-list' span={24}>
           {items &&
-            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+            items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
               <ArrayFieldItemTemplate key={key} {...itemProps} />
             ))}
         </Col>
diff --git a/packages/chakra-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/chakra-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
index f9d9b58552..5b7d1b7910 100644
--- a/packages/chakra-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+++ b/packages/chakra-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -1,6 +1,6 @@
 import { Box, ButtonGroup, HStack } from '@chakra-ui/react';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -12,7 +12,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
diff --git a/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
index fd40448dca..ff4abc09f9 100644
--- a/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
+++ b/packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -2,7 +2,7 @@ import { Box, Grid, GridItem } from '@chakra-ui/react';
 import {
   getTemplate,
   getUiOptions,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   ArrayFieldTemplateProps,
   StrictRJSFSchema,
   RJSFSchema,
@@ -57,7 +57,7 @@ export default function ArrayFieldTemplate<
       <Grid key={`array-item-list-${idSchema.$id}`}>
         <GridItem>
           {items.length > 0 &&
-            items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+            items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
               <ArrayFieldItemTemplate key={key} {...itemProps} />
             ))}
         </GridItem>
diff --git a/packages/core/src/components/templates/ArrayFieldItemTemplate.tsx b/packages/core/src/components/templates/ArrayFieldItemTemplate.tsx
index 996502e690..f83f5e4ad1 100644
--- a/packages/core/src/components/templates/ArrayFieldItemTemplate.tsx
+++ b/packages/core/src/components/templates/ArrayFieldItemTemplate.tsx
@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -16,7 +16,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, className, buttonsProps, hasToolbar, registry, uiSchema } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
diff --git a/packages/core/src/components/templates/ArrayFieldTemplate.tsx b/packages/core/src/components/templates/ArrayFieldTemplate.tsx
index b3f6f80e96..1937857fc7 100644
--- a/packages/core/src/components/templates/ArrayFieldTemplate.tsx
+++ b/packages/core/src/components/templates/ArrayFieldTemplate.tsx
@@ -2,7 +2,7 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -71,7 +71,7 @@ export default function ArrayFieldTemplate<
       />
       <div className='row array-item-list'>
         {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
             <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
       </div>
diff --git a/packages/docs/package.json b/packages/docs/package.json
index b56b59e008..349d0b9777 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -30,7 +30,6 @@
     "@docusaurus/preset-classic": "^2.4.3",
     "@mdx-js/react": "^1.6.22",
     "ajv": "^8.12.0",
-    "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
diff --git a/packages/docs/src/components/HomepageFeatures/index.tsx b/packages/docs/src/components/HomepageFeatures/index.tsx
index 363f035dc0..8036276aab 100644
--- a/packages/docs/src/components/HomepageFeatures/index.tsx
+++ b/packages/docs/src/components/HomepageFeatures/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 import styles from './styles.module.css';
 
 type FeatureItem = {
@@ -43,7 +42,7 @@ const FeatureList: FeatureItem[] = [
 
 function Feature({ title, Svg, description }: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
+    <div className='col col--4'>
       <div className='text--center'>
         <Svg className={styles.featureSvg} role='img' />
       </div>
diff --git a/packages/fluentui-rc/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/fluentui-rc/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
index f9ca66a70c..2f711c01c6 100644
--- a/packages/fluentui-rc/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+++ b/packages/fluentui-rc/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -1,5 +1,5 @@
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -25,7 +25,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const classes = useStyles();
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
diff --git a/packages/fluentui-rc/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/fluentui-rc/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
index 8a69486f29..5bfa096588 100644
--- a/packages/fluentui-rc/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
+++ b/packages/fluentui-rc/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -4,7 +4,7 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -68,7 +68,7 @@ export default function ArrayFieldTemplate<
       />
       <Flex column key={`array-item-list-${idSchema.$id}`} className={classes.arrayItemList}>
         {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
             <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
         {canAdd && (
diff --git a/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
index 3bd0ebf1e6..66af0cac87 100644
--- a/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+++ b/packages/mui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -3,7 +3,7 @@ import Box from '@mui/material/Box';
 import Grid2 from '@mui/material/Grid2';
 import Paper from '@mui/material/Paper';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getUiOptions,
   getTemplate,
@@ -19,7 +19,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
diff --git a/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
index 34b1a4ad29..969fb7a97c 100644
--- a/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
+++ b/packages/mui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -5,7 +5,7 @@ import {
   getTemplate,
   getUiOptions,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -62,7 +62,7 @@ export default function ArrayFieldTemplate<
           registry={registry}
         />
         {items &&
-          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+          items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
             <ArrayFieldItemTemplate key={key} {...itemProps} />
           ))}
         {canAdd && (
diff --git a/packages/react-bootstrap/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/react-bootstrap/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
index 702f37268c..e04151d25e 100644
--- a/packages/react-bootstrap/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+++ b/packages/react-bootstrap/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   getTemplate,
   getUiOptions,
@@ -14,7 +14,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
diff --git a/packages/react-bootstrap/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/react-bootstrap/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
index 2bfbd32564..057e728173 100644
--- a/packages/react-bootstrap/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
+++ b/packages/react-bootstrap/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -2,7 +2,7 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   ArrayFieldTemplateProps,
   buttonId,
   FormContextType,
@@ -60,7 +60,7 @@ export default function ArrayFieldTemplate<
           />
           <Container fluid key={`array-item-list-${idSchema.$id}`} className='p-0 m-0'>
             {items &&
-              items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+              items.map(({ key, ...itemProps }: ArrayFieldItemTemplateType<T, S, F>) => (
                 <ArrayFieldItemTemplate key={key} {...itemProps} />
               ))}
             {canAdd && (
diff --git a/packages/semantic-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/packages/semantic-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
index 0b480e8f49..c3164fdd18 100644
--- a/packages/semantic-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+++ b/packages/semantic-ui/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -1,5 +1,5 @@
 import {
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   GenericObjectType,
   RJSFSchema,
@@ -24,7 +24,7 @@ export default function ArrayFieldItemTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
->(props: ArrayFieldTemplateItemType<T, S, F>) {
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
   const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
diff --git a/packages/semantic-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx b/packages/semantic-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
index 3aced026a9..06fea724f0 100644
--- a/packages/semantic-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
+++ b/packages/semantic-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx
@@ -3,7 +3,7 @@ import {
   getUiOptions,
   isFixedItems,
   ArrayFieldTemplateProps,
-  ArrayFieldTemplateItemType,
+  ArrayFieldItemTemplateType,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -86,7 +86,7 @@ export default function ArrayFieldTemplate<
       <div key={`array-item-list-${idSchema.$id}`}>
         <div className='row array-item-list'>
           {items &&
-            items.map(({ key, uiSchema: itemUiSchema = {}, ...props }: ArrayFieldTemplateItemType<T, S, F>) => {
+            items.map(({ key, uiSchema: itemUiSchema = {}, ...props }: ArrayFieldItemTemplateType<T, S, F>) => {
               // Merge in the semantic props from the ArrayFieldTemplate into each of the items
               const mergedUiSchema = {
                 ...itemUiSchema,
diff --git a/packages/utils/jest.config.js b/packages/utils/jest.config.js
index ba654509b0..77b256a3a1 100644
--- a/packages/utils/jest.config.js
+++ b/packages/utils/jest.config.js
@@ -5,6 +5,7 @@ module.exports = {
     browsers: ['chrome', 'firefox', 'safari'],
   },
   testMatch: ['**/test/**/*.test.ts?(x)'],
+  transformIgnorePatterns: [`/node_modules/(?!nanoid)`],
   coverageDirectory: '<rootDir>/coverage/',
   collectCoverage: true,
   coveragePathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/test'],
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 4ff639a4e1..156994a86d 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -40,6 +40,7 @@
     "jsonpointer": "^5.0.1",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "nanoid": "^3.3.7",
     "react-is": "^18.2.0"
   },
   "devDependencies": {