Как предотвратить переход по ссылке. React js. React-router

Я использую bootstrap в своем проекте и пытаюсь настроить переход по ссылкам при согласии пользователя. Для этого я использую <Promt message='Are you sure'/> (пробовал через history.block - аналогично) Проблема заключается в том что если я соглашаюсь с переходом - все ок. Но если я жму "отмена" то элемент меню на который я кликнул так же выделяется. Получается что перехода не происходит но 2 элемента меню становятся активными.

1. Я нахожусь на 4 вкладке.

2. Я кликнул на 2 вкладку и мне вышло подтверждение моих намерений

3.1 Первый вариант - я нажимаю ок, и я перехожу на вторую вкладку.

3.2 Второй вариант - я нажимаю отмена, и остаюсь на 4 вкладке

Как мне предотвратить такое поведение?

Мой код:

App.js

import React, { useState } from 'react';
import Container from 'react-bootstrap/Container';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
      return (
        <Router   >

        <TitleBar  />
        <Container  className="my-3">
          <Switch  >
                <Route on exact path='/'>
                    <Manual/>
                </Route>
            
            </Switch>
        </Container>

Manual.js

import React from 'react'
import { Switch, useRouteMatch, Route } from 'react-router-dom';
import ListGroup from 'react-bootstrap/ListGroup'
import { LinkContainer } from 'react-router-bootstrap';

const Manual = () => {

const { path, url } = useRouteMatch();


return (
    <Row>
        <Col collumn sm={3} >
            <ListGroup  style={{maxWidth: 190}}>
                <LinkContainer active={false} to={`${url}/first`}>
                    <ListGroup.Item  action >Вкладка1</ListGroup.Item>
                </LinkContainer>
                <LinkContainer to={`${url}/second`}>
                    <ListGroup.Item  action>Вкладка2</ListGroup.Item>
                </LinkContainer>
                <LinkContainer to={`${url}/thrid`}>
                    <ListGroup.Item  action>Вкладка3</ListGroup.Item>
                </LinkContainer>
                <LinkContainer to={`${url}/four`}>
                    <ListGroup.Item action>Вкладка4</ListGroup.Item>
                </LinkContainer>
            </ListGroup>
        </Col>
        <Col>
            <Switch >
                <Route  path={`${path}/first`}>
                    <First/>
                </Route>

                <Route path={`${path}/second`}>
                    <Second/>
                </Route>

                <Route path={`${path}/thrid`} >
                    <Thrid/>
                </Route>

                <Route path={`${path}/four`}>
                    <Four />
                </Route>
            </Switch>
        </Col>
    </Row>
);
}


export default Manual;

Four.js

import Reactfrom 'react';
import { Prompt} from 'react-router-dom'

const Four = () =>{

return(
<Prompt message='Are you sure'/>
)}