[Bug] Preview API hooks aren't behaving as expected in portable stories

[vanessayuenn]

Apart from useArgs not working due to Storybook channel limitations (#29773), other hooks from @storybook/preview-api also don't behave as expected, such as useState and useEffect.

💡 Solutions/Action items:

• Research on how feasible it is to implement support for this
• Document this limitation

---

Currently, portable stories are not compatible with Storybook hooks from @storybook/preview-api. This makes it hard for users who have stories like so to use the Storybook Test feature:

import { useArgs } from '@storybook/preview-api'
export const Default = {
  args: {
    value: true,
  },
  render: function Render() {
    const [{ value }, updateArgs] = useArgs()
    const onValueChange = () => updateArgs({ value: !value })

    return <button onClick={onValueChange}>The value is {JSON.stringify(value)}</button>
  },
  play: async({ canvas }) => {
    const button = await canvas.findByText('The value is true')
    await expect(button).toBeInTheDocument()
    await userEvent.click(button)
    await expect(await canvas.findByText('The value is false')).toBeInTheDocument()
  }
}