Viewport addon not working on click

[NataJenkins]

Summary

Im trying to use the viewport addon on my stories, i managed to achieve to get the addon on the storie but when i click on any of the options nothing happens.

Additional information

This is my .storybook/main.ts:

const config: StorybookConfig = {
    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    addons: [
        "@storybook/addon-viewport",
        "@storybook/addon-onboarding",
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@chromatic-com/storybook",
        "@storybook/addon-interactions",
    ],
    framework: {
        name: "@storybook/react-vite",
        options: {},
    },
    core: {
        builder: "@storybook/builder-vite",
    },
};
export default config;
```

.storybook/preview.ts:
```import type { Preview } from "@storybook/react";
import React from "react";

const preview: Preview = {
    parameters: {
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i,
            },
        },
    },
};

export default preview;

and this is my .stories.tsx:

import TabsView from "../../componentes/Panels/TabsView/Tabsview";
import { GrTest } from "react-icons/gr";

// Meta configuration for Storybook
type Story = StoryObj<typeof meta>;
const meta: Meta<typeof TabsView> = {
    title: "Example/Panels/TabsView",
    component: TabsView,
    parameters: {
        layout: "centered",
        viewport: {
            defaultViewport: "responsive",
        },
    },
    tags: ["autodocs"],
};

export default meta;

function Content({ content }) {
    return <div className="tab__container">Content{content}</div>;
}

const tabs = [
    {
        icon: <GrTest />,
        title: "Title",
        content: <Content content={1} />,
        color: "#E60C96",
    },
    {
        icon: <GrTest />,
        title: "Title2",
        content: <Content content={2} />,
        color: "#9E27B5",
    },
    {
        icon: <GrTest />,
        title: "Title3",
        content: <Content content={3} />,
        color: "#89BE16",
    },
    {
        icon: <GrTest />,
        title: "Title4",
        content: <Content content={4} />,
        color: "#00A0DF",
    },
    {
        icon: <GrTest />,
        title: "Title",
        content: <Content content={1} />,
        color: "#E60C96",
    },
    {
        icon: <GrTest />,
        title: "Title2",
        content: <Content content={2} />,
        color: "#9E27B5",
    },
    {
        icon: <GrTest />,
        title: "Title3",
        content: <Content content={3} />,
        color: "#89BE16",
    },
    {
        icon: <GrTest />,
        title: "Title4",
        content: <Content content={4} />,
        color: "#00A0DF",
    },
];

// Primary story for CentroProcesoCard
export const Primary: Story = {
    args: {
        tabs: tabs,
    },
};

Create a reproduction

No response

[valentinpalkovic]

Hi @NataJenkins

Could you provide a minimal reproduction?
https://storybook.new

[NataJenkins]

Hi @valentinpalkovic

https://stackblitz.com/edit/github-pdw6gs?file=.storybook%2Fmain.ts,.storybook%2Fpreview.ts,vite.config.ts&preset=node

Here i already added my main and preview for storybook. The viewports seem to be working on the sandbox, but i dont know why is not working on my local, im also trying on the default button component. maybe im missing some other configuration?

every other plugin is working fine but the viewport one