I am using Ant Design as the design framework for my application.
The framework has a [Carousel](https://ant.design/components/carousel/) component, the component exposes two methods to switch panes in the carousel.

Here's an example to utilize it in [Javascript](https://stackoverflow.com/questions/44114224/react-js-antd-carousel-with-arrows).

Here's my attempt to do it using Typescript:

```
interface State {
  slider: ReactNode;
}

interface Props {}

class ImageCarousel extends Component<Props, State> {
  private carousel: any;

  constructor(props: Props) {
    super(props);
    this.carousel = React.createRef();
  }

  nextPane() {
    this.carousel.next();
  }
  prevPane() {
    this.carousel.prev();
  }

  render() {
    return (
      <CarouselWrapper>
        <RegularButtonWrapper>
          <RegularButton
            size="large"
            icon="caret-left"
            onClick={this.prevPane}
          />
        </RegularButtonWrapper>
        <FlexCarousel>
          <Carousel
            ref={node => (this.carousel = node)}
            speed={700}
            effect="fade"
            autoplay
            autoplaySpeed={3000}
          >
            <img src={IU} />
            <img src={IU2} />
            <img src={IU3} />
            <img src={IU4} />
            <img src={IU5} />
          </Carousel>
        </FlexCarousel>
        <RegularButtonWrapper>
          <RegularButton
            size="large"
            icon="caret-right"
            onClick={this.nextPane}
          />
        </RegularButtonWrapper>
      </CarouselWrapper>
    );
  }
}

export default ImageCarousel;

```

The above doesn't work - `TypeError: Cannot read property 'carousel' of undefined`.

How can I use the methods with Typescript?