How to interact between Tab and Bot in same App

Question

I have created a app from the developer portal. I added my application(client) id in it https://entra.microsoft.com/. Now I created a bot from Azure Bot from https://portal.azure.com/. I added bot feature into this app and assign my created bot. I add one more feature Tab. And now when i publish this app from developer portal it successfully published.

I downloaded code from the developer portal it give me well organized code. The screenshot is attached of code structure.

The bot is running on 3978 port with restify server and the tab is running on 3000 port with react js server.

Now I have some component in react code (Tab) like buttons. Now when i click on the button I want to send event or message to bot so bot can know which button was cliked and based on it bot can send message in chat. I used some ways but some how it didn't work. the api documentation and the actual library is missing something or i overlooked.

This is my tabConfig file in my Tab.

I refer this documentation:

https://learn.microsoft.com/en-us/javascript/api/@microsoft/teams-js/?view=msteams-client-js-latest.

My code is in typescript.