Routing error, how to fix?

Question

React

I want each click to have its own index. I tried to do something, but apparently because of the map , everything works incorrectly for me. It turns out that if in map[1,2,3] then I have 3 times more elements than I need. I don't know how to do it differently. Help me please.

class ShowCardDescription extends React.Component {
  constructor(props) {
        super(props);
        this.state = {isToggleCard: true};
        this.handleClickCard = this.handleClickCard.bind(this);
    }


    handleClickCard() {
        this.setState({
            isToggleCard: !this.state.isToggleCard
        });
        this.props.handleClick()
    }
  
  render() {
    return (
      <div class='main'>
        <section>
          {this.props.isToggleOn && <div className='element' onClick={this.handleClickCard}/>}
        </section>
        {!this.state.isToggleCard && <div className='content'>
        <div onClick={this.handleClickCard}>
            <p className='close'>close</p>
        </div>
        {this.props.children}</div>}
      </div>
    )
  }
}

class Description extends React.Component {
  render() {
    return (
      <div>
        <p>some text here</p>
      </div>
    )
  }
}


class MainContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isToggleOn: true
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({
            isToggleOn: !this.state.isToggleOn
        });
    }

    render() {
        return [1,2,3].map((index) => {
          return (
            <BrowserRouter>
              <div id="tabs-content">
                <Link to={'/event/' + index}>
                    <ShowCardDescription isToggleOn={this.state.isToggleOn} handleClick={this.handleClick}>
                      <Switch>
                        <Route path='/event/:index'>
                          <Description />
                          <Description />
                          <Description />
                        </Route>
                      </Switch>
                    </ShowCardDescription>
                  </Link>
                </div>
             </BrowserRouter>
        )
      })
    }
}

ReactDOM.render(
  <MainContent />, 
  document.getElementById('root')
);