diff --git a/components/doc/picklist/basicdoc.js b/components/doc/picklist/basicdoc.js
index 5443f0184e..fa73e86b8f 100644
--- a/components/doc/picklist/basicdoc.js
+++ b/components/doc/picklist/basicdoc.js
@@ -35,7 +35,7 @@ export function BasicDoc(props) {
 
     const code = {
         basic: `
-<PickList source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
+<PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
     sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }} />
         `,
         javascript: `
@@ -74,7 +74,7 @@ export default function BasicDemo() {
 
     return (
         <div className="card">
-            <PickList source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
+            <PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
                 sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }} />
         </div>
     );
@@ -129,7 +129,7 @@ export default function BasicDemo() {
 
     return (
         <div className="card">
-            <PickList source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
+            <PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
                 sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }} />
         </div>
     );
@@ -162,7 +162,18 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card">
-                <PickList source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px" sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }} />
+                <PickList
+                    dataKey="id"
+                    source={source}
+                    target={target}
+                    onChange={onChange}
+                    itemTemplate={itemTemplate}
+                    breakpoint="1280px"
+                    sourceHeader="Available"
+                    targetHeader="Selected"
+                    sourceStyle={{ height: '24rem' }}
+                    targetStyle={{ height: '24rem' }}
+                />
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/picklist/filterdoc.js b/components/doc/picklist/filterdoc.js
index 0465abf2d3..f340ee105d 100644
--- a/components/doc/picklist/filterdoc.js
+++ b/components/doc/picklist/filterdoc.js
@@ -35,7 +35,7 @@ export function FilterDoc(props) {
 
     const code = {
         basic: `
-<PickList source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1280px"
+<PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1280px"
     sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }}
     sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" />
         `,
@@ -75,7 +75,7 @@ export default function FilterDemo() {
 
     return (
         <div className="card">
-            <PickList source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1280px"
+            <PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1280px"
                 sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }}
                 sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" />
         </div>
@@ -131,7 +131,7 @@ export default function FilterDemo() {
 
     return (
         <div className="card">
-            <PickList source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1280px"
+            <PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1280px"
                 sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }}
                 sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" />
         </div>
@@ -166,6 +166,7 @@ export default function FilterDemo() {
             </DocSectionText>
             <div className="card">
                 <PickList
+                    dataKey="id"
                     source={source}
                     target={target}
                     onChange={onChange}
diff --git a/components/doc/picklist/pt/ptdoc.js b/components/doc/picklist/pt/ptdoc.js
index fcdccfa04f..5cb21a5fce 100644
--- a/components/doc/picklist/pt/ptdoc.js
+++ b/components/doc/picklist/pt/ptdoc.js
@@ -36,6 +36,7 @@ export function PTDoc(props) {
     const code = {
         basic: `
 <PickList
+    dataKey="id"
     source={source}
     target={target}
     onChange={onChange}
@@ -94,6 +95,7 @@ export default function PTDemo() {
     return (
         <div className="card">
             <PickList
+                dataKey="id"
                 source={source}
                 target={target}
                 onChange={onChange}
@@ -168,6 +170,7 @@ export default function PTDemo() {
     return (
         <div className="card">
             <PickList
+                dataKey="id"
                 source={source}
                 target={target}
                 onChange={onChange}
@@ -215,6 +218,7 @@ export default function PTDemo() {
             <DocSectionText {...props}></DocSectionText>
             <div className="card">
                 <PickList
+                    dataKey="id"
                     source={source}
                     target={target}
                     onChange={onChange}
diff --git a/components/doc/picklist/theming/tailwinddoc.js b/components/doc/picklist/theming/tailwinddoc.js
index 9bfe5ab68a..1e9b4144cc 100644
--- a/components/doc/picklist/theming/tailwinddoc.js
+++ b/components/doc/picklist/theming/tailwinddoc.js
@@ -200,7 +200,7 @@ export default function UnstyledDemo() {
 
     return (
         <div className="card">
-            <PickList source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
+            <PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
                 sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }} />
         </div>
     );
diff --git a/components/lib/picklist/picklist.d.ts b/components/lib/picklist/picklist.d.ts
index 2b5684dd1e..ada61bbb95 100755
--- a/components/lib/picklist/picklist.d.ts
+++ b/components/lib/picklist/picklist.d.ts
@@ -408,7 +408,7 @@ export interface PickListProps {
     /**
      * Name of the field that uniquely identifies the a record in the data.
      */
-    dataKey?: string | undefined;
+    dataKey: string;
     /**
      * The breakpoint to define the maximum width boundary when responsiveness is enabled.
      * @defaultValue '960px'.