HOC issue GSAP target not found when trying to generate Timeline from props

[buzzguy]

I'm trying to create multiple <Timeline /> components by mapping through an array of components that I'm trying to pass to target. Is there a way to dynamically build Timelines?

I am using it in conjunction with react-scrollmagic, but seeing the error with Timeline.

Here is my HOC:

const ScrollmagicWrapper = ({ children }) => {
  return (
    <Controller>
      <Scene reverse={true} triggerHook="onLeave" pin indicators={true}>
        {progress => (
          <Timeline totalProgress={progress} paused>
            {React.Children.map(children || null, (child, i) => {
              return (
                <Timeline target={<child.type {...child.props} key={i} />}>
                  <Tween
                    from={{ opacity: 0, y: '5%' }}
                    to={{ opacity: 1, y: '0' }}
                  />
                  <Tween to={{ opacity: 0 }} />
                </Timeline>
              );
            })}
          </Timeline>
        )}
      </Scene>
    </Controller>
  );
};

The error I'm getting is: GSAP target not found

and when scrollmagic is trying to access Timeline (ScrollMagic.Scene) -> ERROR: Element defined in option "triggerElement" was not found:

[bitworking]

Not sure if fixed with 2.3.0. I would need a sandbox for testing.

[bitworking]

Could also be fixed with 3.1.0, because I optimized the target handling.