Storybook pseudo states affect other stories within the same component

[ninjarogue]

Describe the bug
The pseudo states remain (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 click on the story with the active pseudo states first and the one without it after in that particular order, you'll see that the hover state remains unchanged until the component is remounted.

I have two stories (Default, and Hovered):

export default {
  title: 'pages/Services/CarouselSlider',
  component: CarouselSlider,
  parameters: {
    layout: 'centered'
  }
} as ComponentMeta<typeof CarouselSlider>;

const Template: ComponentStory<typeof CarouselSlider> = () => {
  const images = [
    services.uiUxDesignCarouselImage,
    services.workshop,
    aboutUs.schoolWorx
  ];

  return <CarouselSlider images={images} />;
};



export const Default = Template.bind({});
Default.parameters = {
  pseudo: {
    hover: '#buttonOne'
  }
}

export const Hovered = Template.bind({});
Hovered.parameters = {
  pseudo: {
    hover: '#buttonTwo',
  }
}

Here is the CarouselSlider implementation:

interface IProps {
  images: string[];
}

export const CarouselSlider: ReactFC<IProps> = props => {
  const carouselImages = __filterImages(props.images);
  const [index, setIndex] = useState(0);



  function showImage(index: number) {
    setIndex(index);
  }



  const selectedImage = __selectImage(carouselImages, index);

  return (
    <div className={styles.root}>
      <div className={styles.selectedImage}>
        <img src={selectedImage} alt="" />
      </div>

      <div className={styles.navigator}>
        <div
          id="buttonOne"
          className={styles.circle}
          onClick={() => showImage(0)} />

        <div
          id="buttonTwo"
          data-testid="buttonTwo"
          className={styles.circle}
          onClick={() => showImage(1)} />

        <div
          className={styles.circle}
          onClick={() => showImage(2)} />

        <div
          className={styles.circle}
          onClick={() => showImage(3)} />
      </div>

    </div>
  );
};

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

[yannbf]

Hey @ninjarogue thanks for opening this issue!
However this is the wrong repo. You could write in the correct one instead: https://github.com/chromaui/storybook-addon-pseudo-states