Index attribute does not update the carousel element being displayed

I’m working on something that require the carousel to switch element programmatically, I have something like the following:

<Carousel index={activeChapter} autoPlay={false} animation="slide" navButtonsAlwaysInvisible={true} swipe={false}>
  <div key={0}>0</div>
  <div key={1}>1</div>
  <div key={2}>2</div>
</Carousel>

The activeChapter is a number stored in redux. However when activeChapter updates, the carousel does not switch page.

It appears that the carousel only respects the initial value of activeChapter shows the correct corresponding page upon initial render, but would not update when the activeChapter changes.

I’m currently using react v17, mui v5.2.

Am I using the index attribute wrong, or is this a bug?

Sincerely, Oscar

[Learus]

Fixed in 3.1.1

[jacobikedichi]

I’m seeing the same bug in 3.2.0

@Learus Could you please take a look at this? Thank you very much…