diff --git a/docs/snippets/react/my-component-play-function-composition.js.mdx b/docs/snippets/react/my-component-play-function-composition.js.mdx
index 69987e5d2e17..a6eb763cf286 100644
--- a/docs/snippets/react/my-component-play-function-composition.js.mdx
+++ b/docs/snippets/react/my-component-play-function-composition.js.mdx
@@ -20,7 +20,7 @@ const Template = (args) => <MyComponent {...args} />;
 
 export const FirstStory = Template.bind({});
 FirstStory.play = async () => {
-  userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  await userEvent.type(screen.getByTestId('an-element'), 'example-value');
 };
 
 export const SecondStory = Template.bind({});
diff --git a/docs/snippets/react/my-component-play-function-composition.ts.mdx b/docs/snippets/react/my-component-play-function-composition.ts.mdx
index 49a23764ec14..963c4333adb2 100644
--- a/docs/snippets/react/my-component-play-function-composition.ts.mdx
+++ b/docs/snippets/react/my-component-play-function-composition.ts.mdx
@@ -22,7 +22,7 @@ const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...
 
 export const FirstStory = Template.bind({});
 FirstStory.play = async () => {
-  userEvent.type(screen.getByTestId('an-element'), 'example-value');
+  await userEvent.type(screen.getByTestId('an-element'), 'example-value');
 };
 
 export const SecondStory = Template.bind({});