React: Communicating state between two sibling components

Question

I am using a third-party react library (blueprintjs) with a Tab component that's used like this:

<Tab
    id="notifications"
    title={<span>"Notifications"</span>}
    panel={<div>The content of the page</div>}
/>

Instead of being rendered directly, it's parent component Tabs renders all children components that are of type Tab.

I would like to link the title and panel props together, so that I can show a badge in the title element, based on the state of the panel element:

How should I go about this?

My initial ideas:

1. Get the number of unread notifications from the panel element via a ref and pass it to the title element as a prop

2. Move state up one level. This feels awkward -- I want the management for the notifications to stay in the notifications page.

3. Have a <NotificationTab ... /> element which handles state for the panel + the title together. The problem with this method is that the parent Tabs component will not recognize non-Tab components.

Note: I am aware that there are several questions about this, but the answer is always "lift the state into the parent component". I really would rather not do that, since the parent component doesn't have anything to do with notifications -- it just switches tabs.