Declarative combination and imperative in ReactJS

When designing an application in react js to improve reusability, I used Tabs, and then passed the Tabs and headers to similar

const tabs ={
   "tabHeader1": TabContent1,
   "tabHeader2": TabContent2

 }
<SwipableTabs tabs={tabs}>
Now, when I had to grant them based on permissions, I was confused. To avoid other problems, I designed the following components:

<ProtectedAction>
{children}
My ProtectedAction component will check permissions and present children based on the permissions. What the reaction implies (declarative).

Now, when I see the examples above (such as data-driven tabs), I have to use other examples that I want to get rid of again.