diff --git a/src/components/DatePicker.stories.tsx b/src/components/DatePicker.stories.tsx
index e853cb1..5af571b 100644
--- a/src/components/DatePicker.stories.tsx
+++ b/src/components/DatePicker.stories.tsx
@@ -124,7 +124,7 @@ export const DateOnly: Story = {
         type: 'date',
         label: 'Publish date',
     },
-    render: (args) => {
+    render: function DateOnlyRender(args) {
         const [value, setValue] = useState('2031-05-20');
         return (
             <DatePicker
@@ -144,7 +144,7 @@ export const DateTime: Story = {
         type: 'datetime-local',
         label: 'Schedule at',
     },
-    render: (args) => {
+    render: function DateTimeRender(args) {
         const [value, setValue] = useState('2031-05-20T14:30');
         return (
             <DatePicker
@@ -167,7 +167,7 @@ export const TimeOnlyInline: Story = {
         size: 'sm',
         rightIcon: <CalendarDaysIcon className="h-4 w-4 ui-body-secondary" />,
     },
-    render: (args) => {
+    render: function TimeOnlyInlineRender(args) {
         const [value, setValue] = useState('09:00');
         return (
             <DatePicker
@@ -182,7 +182,8 @@ export const TimeOnlyInline: Story = {
     },
 };
 
-export const Error: Story = {
+export const ErrorState: Story = {
+    name: 'Error',
     args: {
         type: 'datetime-local',
         label: 'Schedule at',
@@ -205,7 +206,7 @@ export const SizeMatrix: Story = {
         type: 'datetime-local',
         label: 'Schedule at',
     },
-    render: (args) => {
+    render: function SizeMatrixRender(args) {
         const [value, setValue] = useState('2031-05-20T14:30');
         return (
             <div className="grid grid-cols-1 gap-3">
diff --git a/src/components/Dropdown.stories.tsx b/src/components/Dropdown.stories.tsx
index bba5158..ac2be89 100644
--- a/src/components/Dropdown.stories.tsx
+++ b/src/components/Dropdown.stories.tsx
@@ -99,7 +99,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Stacked: Story = {
-    render: (args) => {
+    render: function StackedRender(args) {
         const [value, setValue] = useState(args.value);
         return (
             <Dropdown
@@ -119,7 +119,7 @@ export const Inline: Story = {
         layout: 'inline',
         size: 'sm',
     },
-    render: (args) => {
+    render: function InlineRender(args) {
         const [value, setValue] = useState(args.value);
         return (
             <Dropdown
@@ -147,7 +147,7 @@ export const WithError: Story = {
 };
 
 export const SizeMatrix: Story = {
-    render: (args) => {
+    render: function SizeMatrixRender(args) {
         const [value, setValue] = useState(args.value);
         return (
             <div className="grid grid-cols-1 gap-3">
diff --git a/src/components/Form.stories.tsx b/src/components/Form.stories.tsx
index 9973034..6622225 100644
--- a/src/components/Form.stories.tsx
+++ b/src/components/Form.stories.tsx
@@ -67,7 +67,7 @@ export const Basic: Story = {
 };
 
 export const WithActions: Story = {
-    render: (args) => {
+    render: function WithActionsRender(args) {
         const [title, setTitle] = useState('Storybook powered CMS');
         const [status, setStatus] = useState('draft');
 
diff --git a/src/components/InputField.stories.tsx b/src/components/InputField.stories.tsx
index 55197c5..6d60603 100644
--- a/src/components/InputField.stories.tsx
+++ b/src/components/InputField.stories.tsx
@@ -127,7 +127,7 @@ export const Text: Story = {
         label: 'Title',
         placeholder: 'Write a title',
     },
-    render: (args) => {
+    render: function TextRender(args) {
         const [value, setValue] = useState('Storybook integration');
         return (
             <InputField
@@ -148,7 +148,7 @@ export const PasswordWithToggle: Story = {
         label: 'Password',
         placeholder: 'Type a strong password',
     },
-    render: (args) => {
+    render: function PasswordWithToggleRender(args) {
         const [value, setValue] = useState('pa55word');
         return (
             <InputField
@@ -171,7 +171,7 @@ export const InlineWithIcon: Story = {
         size: 'sm',
         rightIcon: <MagnifyingGlassIcon className="h-4 w-4 ui-body-secondary" />,
     },
-    render: (args) => {
+    render: function InlineWithIconRender(args) {
         const [value, setValue] = useState('posts');
         return (
             <InputField
@@ -186,7 +186,8 @@ export const InlineWithIcon: Story = {
     },
 };
 
-export const Error: Story = {
+export const ErrorState: Story = {
+    name: 'Error',
     args: {
         type: 'email',
         label: 'Email',
@@ -210,7 +211,7 @@ export const SizeMatrix: Story = {
         label: 'Name',
         placeholder: 'Enter value',
     },
-    render: (args) => {
+    render: function SizeMatrixRender(args) {
         const [value, setValue] = useState('Beatrice');
         return (
             <div className="grid grid-cols-1 gap-3">
diff --git a/src/components/Label.stories.tsx b/src/components/Label.stories.tsx
index bf35627..e7ee73e 100644
--- a/src/components/Label.stories.tsx
+++ b/src/components/Label.stories.tsx
@@ -53,7 +53,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Body: Story = {};
 
-export const Error: Story = {
+export const ErrorState: Story = {
+    name: 'Error',
     args: {
         variant: 'error',
         children: 'This field is required',
diff --git a/src/components/MDXEditorField.stories.tsx b/src/components/MDXEditorField.stories.tsx
index a8f05e2..16953cd 100644
--- a/src/components/MDXEditorField.stories.tsx
+++ b/src/components/MDXEditorField.stories.tsx
@@ -115,7 +115,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Editable: Story = {
-    render: (args) => {
+    render: function EditableRender(args) {
         const [markdown, setMarkdown] = useState(args.markdown);
         return (
             <div className="w-full max-w-2xl">
diff --git a/src/components/Table.stories.tsx b/src/components/Table.stories.tsx
index dcdcbf7..94a69ae 100644
--- a/src/components/Table.stories.tsx
+++ b/src/components/Table.stories.tsx
@@ -183,7 +183,7 @@ export const Empty: Story = {
 };
 
 export const InteractiveSortingAndPagination: Story = {
-    render: () => {
+    render: function InteractiveSortingAndPaginationRender() {
         const [sorting, setSorting] = useState<SortState | null>({
             field: 'name',
             direction: 'asc',