storybook-addon-pseudo-states Hover behavior persists until component is remounted.

Describe the bug The hover behavior is still shown (while viewing the stories at issue on the canvas) even after switching between stories for a single React (v18.0.2) component. The issue resolves itself once the component is remounted.

To Reproduce If you alternate between the two stories (Default and Hovered) to view their canvases, you'll see that the hover behavior persists until the components are remounted. And if you remount the component with the pseudo hover state enabled, the hover behavior disappears.

Stories:

// HeaderNavigation.stories.tsx

import {
  ComponentMeta,
  ComponentStory
} from '@storybook/react';
import { HeaderNavigation } from 'modules';
import { withRouter } from 'storybook-addon-react-router-v6';



export default {
  title: 'modules/layer00/HeaderNavigation',
  component: HeaderNavigation.FC,
  decorators: [withRouter],
  parameters: {
    layout: 'fullscreen',
    reactRouter: {
      routePath: '/'
    },
  },
} as ComponentMeta<typeof HeaderNavigation.FC>;

const Template: ComponentStory<typeof HeaderNavigation.FC> = () => <HeaderNavigation.FC />;

export const Default = Template.bind({});

export const Hovered = Template.bind({});
Hovered.parameters = {
  pseudo: {
    hover: "#linkAboutUs"
  }
}

HeaderNavigation implementation:

// HeaderNavigation.tsx

import {
  FC as ReactFC,
  startTransition,
  useCallback
} from 'react';

import { useNavigate } from 'react-router-dom';

import styles from './HeaderNavigation.module.css';
import { topBarLogo } from 'assets/images/svg';



export const FC: ReactFC = () => {
  const navigate = useNavigate();



  const goTo = useCallback((path: string) => {
    startTransition(() => {
      navigate(path);
    });
  }, [navigate]);



  return (
    <header className={styles.header}>

      <div className={styles.headerItems}>

        <img className={styles.itemsLogo} src={topBarLogo} alt="" />

        <nav className={styles.itemsNavlinks}>
          <div onClick={() => goTo('/services')}>
            Services
          </div>

          <div
            id="linkAboutUs"
            onClick={() => goTo('/aboutus')}>
            About Us
          </div>

          <div onClick={() => goTo('/')}>
            Industries
          </div>

          <div onClick={() => goTo('/')}>
            Work
          </div>

          <div onClick={() => goTo('/')}>
            Contact us
          </div>
        </nav>

        <button className={styles.itemsButton}>
          START A PROJECT
        </button>

      </div>

    </header>
  );
};

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    npm: 8.13.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9
    @storybook/addon-essentials: ^6.5.9 => 6.5.9
    @storybook/addon-interactions: ^6.5.9 => 6.5.9
    @storybook/addon-links: ^6.5.9 => 6.5.9
    @storybook/builder-webpack5: ^6.5.9 => 6.5.9
    @storybook/jest: ^0.0.10 => 0.0.10
    @storybook/manager-webpack5: ^6.5.9 => 6.5.9
    @storybook/node-logger: ^6.5.9 => 6.5.9
    @storybook/preset-create-react-app: ^4.1.2 => 4.1.2
    @storybook/react: ^6.5.9 => 6.5.9
    @storybook/testing-library: ^0.0.13 => 0.0.13
    ```