diff --git a/src/components/@shared/FormFields/Datatoken/index.stories.tsx b/src/components/@shared/FormFields/Datatoken/index.stories.tsx
index 52c36ae78..be6e2567a 100644
--- a/src/components/@shared/FormFields/Datatoken/index.stories.tsx
+++ b/src/components/@shared/FormFields/Datatoken/index.stories.tsx
@@ -2,14 +2,40 @@ import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Datatoken from '@shared/FormFields/Datatoken'
 import { InputProps } from '@shared/FormInput'
+import { withFormik } from 'formik'
 
 export default {
   title: 'Component/@shared/FormFields/Datatoken',
   component: Datatoken
 } as ComponentMeta<typeof Datatoken>
 
+const MockedForm = withFormik({
+  mapPropsToValues: () => ({
+    name: 'OCEAN',
+    symbol: 'OCEAN'
+  }),
+  validate: (values) => {
+    const errors = {
+      name: ''
+    }
+
+    if (!values.name) {
+      errors.name = 'Required'
+    }
+
+    return errors
+  },
+
+  handleSubmit: (values, { setSubmitting }) => {
+    console.log(JSON.stringify(values, null, 2))
+    setSubmitting(false)
+  },
+
+  displayName: 'Datatoken'
+})(Datatoken)
+
 const Template: ComponentStory<typeof Datatoken> = (args: InputProps) => (
-  <Datatoken {...args} />
+  <MockedForm {...args} />
 )
 
 interface Props {
@@ -18,5 +44,6 @@ interface Props {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  name: 'PARCOUR-73'
+  name: 'PARCOUR-73',
+  symbol: 'PARCOUR-73'
 }