Storybook play function doesn't show interactions in the bottom panel - reactjs

Question

I am using storybook interactions addon and the play functionality. This is my code:
export default {
component: MyComponent,
title: "My Component",
args: {
someId: "someId",
},
decorators: [
(Story) => (
<QueryClientProvider client={queryClient}>
<Header />
<Box sx={{ float: "right" }}>
<Layout>
<Story />
</Layout>
</Box>
</QueryClientProvider>
),
],
} as ComponentMeta<typeof MyComponent>;
const Template: ComponentStory<typeof MyComponent> = (args: any) => {
return <MyComponent {...args} />;
};
export const MyComponentWithInteraction = Template.bind({});
MyComponentWithInteraction.play = async ({ canvasElement }) => {
const canvas = within(canvasElement);
const addButton = canvas.getAllByText("+ Add")[0];
await userEvent.click(addButton);
};
My component appears on my storybook, but the interaction tab shows no interactions:
These are the packages related to storybook in my devDependencise
"#storybook/addon-essentials": "6.5.16",
"#storybook/addon-interactions": "6.5.16",
"#storybook/addon-knobs": "^6.4.0",
"#storybook/builder-webpack5": "6.5.16",
"#storybook/jest": "0.0.10",
"#storybook/manager-webpack5": "6.5.16",
"#storybook/react": "^6.5.15",
"#storybook/testing-library": "0.0.13",
"#types/storybook__addon-knobs": "^5.2.1",
"#types/storybook__react": "^5.2.1",
"msw-storybook-addon": "1.7.0",
"tsconfig-paths-webpack-plugin": "4.0.0",
"webpack": "5"
This is my main.ts
module.exports = {
stories: ["../src/**/*.stories.#(mdx|tsx|ts|jsx|js)"],
logLevel: "debug",
addons: [
"#storybook/addon-essentials",
"#storybook/addon-links",
"#storybook/addon-interactions",
"msw-storybook-addon",
],
framework: "#storybook/react",
features: {
interactionsDebugger: true,
},
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
include: path.resolve(__dirname, "../src"),
});
config.resolve.plugins = [
new TsconfigPathsPlugin({
configFile: path.resolve(__dirname, "../tsconfig.json"),
}),
];
// Return the altered config
return config;
},
core: {
builder: "#storybook/builder-webpack5",
},
docs: {
autodocs: true,
},
};
If I add this line of code at the end of my story:
await expect(canvas.getByText("Some text")).toBeInTheDocument();
I see that it fails, because it is comparing it against the initial view before the click. But if I get rid of this line, it shows me the view that is the result of the click. I don't see any running in the control tab of the bottom panel either. This is strange.

Answer 1

I found the issue, although it is not shown in my question, I'm going to answer it here ,maybe I can save someone from spending 3-4 hours on this. my imports looked like this which was wrong:
import { within } from "#testing-library/react";
import userEvent from "#testing-library/user-event";
This is the right import
import { userEvent, within } from "#storybook/testing-library";