React-GSAP is it possible to separate the logic of general animation and animated components?

Question

React

Hello! I'm doing an experimental project. For animation I use react-gsap.
The structure is as follows:
src
- components
- pages
- store
- styles
- tweens Typical
component pseudocode

import React from 'react';

// подключаю нужные стилевые элементы
import {Button} from '../styles/Button'
import {Blob, Blobs} from '../styles/Blobs'

// подключаю нужные мне анимации
import BlobsAnimated from '../tweens/Blobs'

// если надо, инъекчу стор, но тут я это опущу
//... render 
<Button>
  {children}
  <Blobs>
    <BlobsAnimated
      duration={1}
      delay={0.1}
    >
      <Blob />
      <Blob />
      <Blob />
      <Blob />
    </BlobsAnimated>
  </Blobs>
</Button>

Typical animation, for example, the same BlobsAnimated

import React from 'react';
import { Tween } from 'react-gsap';

export default ({ children, duration, delay }) => (
<Tween
  staggerFrom={{
     //...
  }}
  duration={duration}
  stagger={delay}
  >
    {children}
</Tween>
);

Now the crux of the matter! Everything is fine until we remember about Timeline. And I would really like to have an animation root component with a common timeline for all animations on the page! Something like the following as I imagine:

// src/tweens.index.js

import React from 'react';
import {Timeline} from 'react-gsap';
//... импорт всех твинов

export default class extends React.Component {
  render () {
    return (
      <Timeline
        add={LogoAnimated}
        add={NavAnimated}
        add={BlobAnimated}
        // etc
      />
      // or
      <Timeline>
        <LogoAnimated />
        <NavAnimated />
        <BlobAnimated />
      </Timeline>
    );
  }
}

And in the top App.js component in the render, submit this timeline. On the one hand, it's bad that twin components will be needed in two places - on the general timeline and in page components. On the other hand, on the timeline I set the chemistry between the twins themselves, and in the page components I specify what exactly to animate in the component itself, in the twin I tell how to animate. It turns out what, how and when (in what order).
Rave? If yes, what is the alternative? If not, how to implement it?) The react-gsap documentation is extremely scarce...)