I’m trying to implement responsive testing for my Navbar component using Storybook’s withResponsiveViews decorator. However, I’m encountering an issue where the component doesn’t render correctly in different viewports.

// Navbar.stories.tsx
import React from 'react';
import Navbar  from './Navbar';
import { Meta, StoryObj } from '@storybook/react';
import { withResponsiveViews } from 'storybook-addon-responsive-views';

const meta: Meta<typeof Navbar> = {
    title: "NavigationBar",
    component: Navbar,
    argTypes: {
        // arg types
    },
    decorators: [withResponsiveViews],
};

export default meta;

type Story = StoryObj<typeof Navbar>;



// Every Name export in this file represents a story
export const NavigationBar = () => <Navbar/>;

//Navbar.jsx

import React from "react";
import '../../../App.css'

const Navbar = () => {
    return (
<div className="navbar bg-base-100">
  
  <div className="navbar-start">
    {/* Hamburger menu for small screens  and drop down Navbar*/}
    <div className="dropdown md:flex">
      <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-5 w-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M4 6h16M4 12h8m-8 6h16" />
        </svg>
      </div>
      <ul
        tabIndex={0}
        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
        <li><a>Item 1</a></li>
        <li>
          <a>Parent</a>
          <ul className="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </li>
        <li><a>Item 3</a></li>
      </ul>
    </div>
    {/* Logo or Brand  */}
    <a className="btn btn-ghost text-xl">daisyUI</a>
  </div>
   {/* Horizontal menu for large screens  */}
  <div className="navbar-center hidden lg:flex">
    <ul className="menu menu-horizontal px-1">
      <li><a>Item 1</a></li>
      <li>
        <details>
          <summary>Parent</summary>
          <ul className="p-2">
            <li><a>Submenu 1</a></li>
            <li><a>Submenu 2</a></li>
          </ul>
        </details>
      </li>
      <li><a>Item 3</a></li>
    </ul>
  </div>
  <div className="navbar-end">
    <a className="btn">Button</a>
  </div>
</div>
)
}

export default Navbar;

I expect the Navbar component to render differently based on the selected viewport in Storybook. However, the component appears the same in all viewports.

**Troublshootings Steps Attempted: **

1. Checked for typos or syntax errors: Ensured there are no errors in the code, especially in the component and story files.

2. Verified component rendering: Confirmed that the Navbar component renders correctly outside of Storybook.

3. Reviewed Storybook configuration: Checked if the @storybook/addon-viewport addon is correctly registered and configured.

4. Cleared Storybook cache: Ran npm run storybook:clean to clear the cache and try again.