Storybook - Animation works on Canvas tab but not in Doc tab

Question

I'm writing documentation for a React 18 component with storybook, a simple progress bar. It's awesome, but i'm stumbling upon a annoying problem. My component works very well in my application, and in the storybook canvas tab too.

But, inside the storybook Doc tab, it seems that it gets rerendered every time i change a prop in the defined below it. Here's my documentation (mdx) file:

import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
import { ProgressBar } from "./ProgressBar";

<Meta
  title="Layout/Header/ProgressBar"
  component={ProgressBar}
/>

# ProgressBar

A progress bar for the Header component.

## Props


export const Template = (args) => <ProgressBar {...args} />;

<Canvas>
  <Story
    name="ProgressBar"
    args={{
      step: 2,
      totalSteps: 12,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="ProgressBar" />

The component is displayed properly but, incrementing the step prop in the argsTable, the progress bar is not animating because it gets rerendered completely (tested adding the useEffect hook with [] as dependency).

I think is related to how storybook handle the documentation, because i don't have this problem in the canvas tab or in an app where i use the same ProgressBar component