Repository: storybook
Issue: Storybook pseudo states affect other stories within the same component
Labels: bug,needs triage

**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):
```tsx
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:
```tsx
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**
```shell
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
```