Как установить ID при сбое реагировать?

Question

Вот мой код, здесь возникает проблема, когда мы нажимаем 1 вместо 1, он показывает все.

import React from 'react';
import {  Table , Collapse , Card, CardBody } from 'reactstrap';
class multipleCollapse extends React.Component
{    
constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { collapse: true };
}
toggle() {
    this.setState(state => ({ collapse: !state.collapse }));
}
render()
{
    return(
        <div className="container">
            <div className="py-5 text-center">
                <div className="jumbotron">
                    <div className="container">
                        <h3>Collapse Big Title</h3>
                        <hr/>
                        <div>
                            <Table hover bordered>
                            {/*  */}
                             <thead>
                                <tr  onClick={this.toggle} id="01" >
                                    <th>Collapse 1 little Title</th>                                          
                                </tr>
                                </thead>                                    
                                <tbody>
                                <tr>     
                                <td>                                                                       
                                <Collapse isOpen={this.state.collapse} toggler="#01">
                                <Card>
                                <CardBody>
                                <Table>
                                 <thead>
                                    <tr>
                                        <th>collapse 1 children 01</th>
                                        <th>collapse 1 children 01 value</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <th>collapse 1 children 02</th>
                                        <th>collapse 1 children 02 value</th>
                                    </tr>
                                    </tbody>
                                </Table>
                                </CardBody>
                                </Card>
                                </Collapse >                                    
                                </td>
                                </tr>                               
                                </tbody>
                            {/*  */}  
                            {/*  */}
                              <thead>
                                <tr onClick={this.toggle} id="02" >
                                    <th>Collapse 2 little Title</th>                                          
                               </tr>
                                </thead>                                    
                                <tbody>
                                <tr>     
                                <td>                                                                       
                                <Collapse isOpen={this.state.collapse} toggler="#02">
                                <Card>
                                <CardBody>
                                <Table>
                                    <thead>
                                    <tr>
                                        <th>collapse 2 children 01</th>
                                        <th>collapse 2 children 01 value</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <th>collapse 2 children 02</th>
                                        <th>collapse 2 children 02 value</th>
                                    </tr>
                                    </tbody>
                                </Table>
                               </CardBody>
                                </Card>
                                </Collapse >                                    
                                </td>
                                </tr>                               
                                </tbody>
                            {/*  */}                                                                        
                            </Table>                         
                        </div>                            
                    </div>
                </div>
            </div>
        </div>
    );
}
}export default multipleCollapse;
//

Код состоит из 2 идентификаторов свертываний, которые сначала автоматически показывают оба содержимого свертывания икогда пользователь нажимает на один из идентификаторов, он должен свернуться 1 вместо того, чтобы свернуть все.

Помогите мне проверить, где я сделал свою ошибку.

Заранее спасибо!