How to reset the entire page and results table when we change tabs in reactjs

Question

This error is occurring,

For example, please imagine this instance, if we got two tabs (A and B) with an input field, and if we type something in tab A and click on submit, a table will appear with values, then if I suddenly move to tab B, the input field has the same value whatever I entered in tab A, and also the same table is listing.

For the input field, I used useEffect for every tab change the input value should be empty like this,

    useEffect(() => {
       setInputfield("")
},[props.tabChange])

and it works fine, but

the table keeps showing, I also want the table to get hidden when the tab changes.

And I am actually using like this,

<Route  path ={tabPath} render{() => <Tab tabType={"A"}/>}
<Route  path ={tabPath} render{() => <Tab tabType={"B"}/>}

Could someone please help me, it would be highly appreciable!