BotFramework-WebChat Destroy all bot activity subscriptions on componentWillUnmount - reactjs

Question

I am using the bot framework-webchat 0.12.0 version for a React App. I am initializing the Chat component with custom botconnection, creating a backchannel mechanism.
Does anyone know how to unsubscribe / destroy all bot activities in the backchannel?
When I inspect the network tab it seems that when I navigate with the react router to the view which contains the webchat component, a WebSocket connection is initialized every time and it stays open even after the component has been unmounted (navigate away).
I am afraid those web socket connections might become a problem if they don't get removed.
Here is what I am doing in my React component:
import { Chat, DirectLine } from 'botframework-webchat';
...
componentDidMount() {
const { user, token } = this.props;
if (token && user && Object.keys(user).length !== 0) {
this.botConnection = new DirectLine({
secret: configs.bot.secret_key,
webSocket: 'true'
});
this.initBot();
}
}
initBot = () => {
const { token, user } = this.props;
this.botConnection.postActivity({
type: 'event',
value: {
accessToken: token,
context: 'user'
},
from: {
id: user.userName
},
name: 'conversationInfo'
}).subscribe(() => {
this.setState({ renderChatBot: true });
});
}
...
render() {
const { token, user } = this.props;
if (token !== '' && this.state.renderChatBot) {
console.log('BOTCHAT RENDER');
return (
<Chat
bot={{ id: configs.botId }}
botConnection={this.botConnection}
user={{ id: user.userName }}
token={token}
resize="detect"
/>
);
}
return null;
}
I have spent a few hours searching trough the documentations and also reading trough the files and I can not seem to find a way to destroy those web socket connections when the webchat component get's unmounted.
Any help would be greatly appreciated.