Carousel: Changing the number of items in the carousel crashes the component

In CarouselIndicators.render() each panel index is looped through:

{[...Array(props.noOfIndicators).keys()].map((index) => {

later inside the loop, the code is trying to access props.items using that index, however that index is an index into the number of panels not items so this:

id = props.items[index].id;

causes a TypeError: Cannot read properties of undefined (reading 'id').

To duplicate:

  render() {
    let items = [
      {
        id: 0,
        heading: 'Zero',
      },
      {
        id: 1,
        heading: 'One'
      },
      {
        id: 2,
        heading: 'Two',
      },
      {
        id: 3,
        heading: 'Three'
      }
    ];
    if (this.state.filter) {
      items = [items[0]];
    }

    return (
      <div>
        <Button label="Toggle" onClick={() => this.setState({ filter: true }) } />
        <Carousel
            hasPreviousNextPanelNavigation
            items={items}
            itemsPerPanel={3}
        />
      </div>
    );
  }

When you click the button you will experience the error.

Start at CarouselIndicators.render(), especially the loop over props.noOfIndicators and its access to props.items[index]. Reproduce the crash with the filtering example from the issue, then verify that changing the item count no longer causes a TypeError and that the carousel indicators remain correct.