x-wizard:step not working inside alpine for loop

[sanderjongsma]

<template x-for="step in configuratorData.steps">
    <div x-wizard:step>
        <span x-text="step.name"></span>
    </div>
</template>

<div x-wizard:step>
    step outside for loop
</div>

I want to display steps dynamic based on configurator data. But it makes 3 steps but with all the step data in each step. The step outside the loop works fine. I made a gif to make it more clear. In the screenshot is the html output. Am I doing something wrong.