Increment value every 4 seconds

Using HTML and AlpineJS I have the following:

<div 
  x-data='{ keys: ['a', 'b', 'c'], index: 0 }' 
  x-init="setTimeout(() => i = i < keys.length - 1 ? i + 1 : 0, 4000)">
</div>

I need the index to increment every 4 seconds and back to zero when reaches last one.

My code increments from 0 to 1 but it stops there.

How can I make this work?