Управление каруселью с помощью ссылок React- Bootstrap

Question

Я пытаюсь управлять Каруселью из ссылок в NavBar. Сейчас у меня есть метод click в компоненте HomePage (родительский компонент NavBar и Carousel), который обновляет состояние текущего выбранного индекса на основе того, какая ссылка нажата в NavBar. Я понятия не имею, что нужно сделать, чтобы Карусель прослушивала состояние индекса и перемещала слайды после нажатия на ссылку. Когда у меня изначально был установлен activeIndex, я не мог заставить его правильно прослушивать индекс, переданный как реквизит, и обработчик onSelect также практически ничего не делал.

Update: HomePage => просто добавил направление к состояние, чтобы отразить изменения обновления v2 в карусели ниже.

class HomePage extends Component {
    constructor(props){
        super(props);
        this.state = {index: '0', direction: null};
    }

    handleclick = (i) => {
        this.setState({direction: (this.state.index>i) ? 'prev':'next', index: i});
    }

    render() {
        return (
            <Container className='containerCustom d-flex h-100 w-100' fluid>
                <Row className='fullscreen-bg h-100 w-100'>
                    <video loop autoPlay className='fullscreen-bg_video w-100 h-100'>   
                        <source src={background} type='video/mp4'/>
                    </video>
                </Row>
                <Row className='flex-fill w-100 navrow' noGutters>
                    <Col className='navCol'>
                        <NavBar handleClick={this.handleclick}/> 
                    </Col>
                    <Col className='carCol d-flex h-100'>
                        <VCarousel index={this.state.index} direction={this.state.direction}/>
                    </Col>
                </Row>
            </Container>
        )
    }
}export default HomePage;

NavBar

const NavBar = (props) => {

    const onSelect = eventKey => {props.handleClick(eventKey)};

    return (
        <Nav className='ribbon flex-column h-100 nav-justified' fill onSelect={onSelect}>
            <Item className='flex-column header nav-fill'>
                <Item><Image className='profpic' src={profpic} roundedCircle/></Item><br></br>
                <Item>Logo</Item>
                <Item id='name'>Name</Item>
                <Item id='contact'>Contact 1</Item>
                <Item id='contact'>Contact 2</Item>
            </Item>
            <Item className='flex-column carousel-links'>
                <Link eventKey={0}>Blogs</Link>
                <Link eventKey={1}>About</Link>
                <Link eventKey={2}>Past Projects</Link>
                <Link eventKey={3}>Current Projects</Link>
            </Item>
        </Nav>
    )
}
export default NavBar;

Обновление V1: Carousel => Эта версия просто ставит «активное» имя класса условно, но это убивает CSS анимации, так как условные выражения не добавляют их. Я не уверен, как добавить их временно или поставить переход таким образом, чтобы он реагировал bootstrap, когда вы обычно управляете им с помощью индикаторов или стрелок.

const VCarousel = (props) => {

    const index = props.index;

    return(
        <Carousel id='vCarousel' className='w-100 h-100 d-flex vert' interval={null} controls={false} indicators={true} touch={false} keyboard={false}>
            <Item id='blank' className={'h-100' + (index == 0 ? ' active':'')}>
                <Container className='w-100 h-100 d-flex'>

                </Container>
            </Item>    
            <Item className={'h-100' + (index == 1 ? ' active':'')}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>About Me</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
            <Item className={'h-100' + (index == 2 ? ' active':'')}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Past Projects</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
            <Item className={'h-100' + (index == 3 ? ' active':'')}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Current Projects</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
        </Carousel>
    )
}
export default VCarousel;

Обновление V2: Карусель => Эта версия пытается использовать документированную версию управляемой карусели, но я не уверен, что указать для направления и onSelect. Анимации также испорчены - по какой-то причине элемент carousel-item-left (или right) применяется дважды, а затем к предыдущему или следующему слайду не добавляется className, чтобы анимация правильно скользила (вместо полного исчезновения) У меня есть файл CSS, который меняет анимацию карусели на вертикальную, но я не уверен, что делать в этой точке. Я также не знаю, что делать с частью onSelect.

const VCarousel = (props) => {

//this part is unused because it doesn't work. activeIndex right now is just using props.index because I don't know how to implement onSelect here
    const [index, setIndex] = useState(0);
    const [direction, setDirection] = useState(null);

    const handleSelect = (selectedIndex, e) => {
        setIndex({index: props.index});
        setDirection({direction: props.direction});
    }

    return(
        <Carousel id='vCarousel' className='w-100 h-100 d-flex vert' activeIndex={props.index} direction={direction} onSelect={handleSelect}
         interval={null} controls={false} indicators={true} touch={false} keyboard={false}>
            <Item id='blank' className={'h-100'}>
                <Container className='w-100 h-100 d-flex'>

                </Container>
            </Item>    
            <Item className={'h-100'}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>About Me</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
            <Item className={'h-100'}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Past Projects</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
            <Item className={'h-100'}>
                <Container className='info-container'>
                    <h1 style={{fontFamily: 'Verdana', color: 'black'}}><b>Current Projects</b></h1>
                    <div className='about-body'>
                        <p></p>
                    </div>
                </Container>
            </Item>
        </Carousel>
    )
}
export default VCarousel;

CSS для карусели:

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
        -moz-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
    -webkit-transform: translate3d(0,-100%, 0);
        -moz-transform: translate3d(0,-100%, 0);
            transform: translate3d(0,-100%, 0);
}