Sticky only when custom target is out of viewport

[LeComptoirDesPharmacies]

Hi everyone,

Context :
We have a header on two rows :
First => Menu
Second => Search bar

"Search bar" (Second row) should always be sticky but "Menu" (First row) should only be sticky if user scroll back some pixels.
We successfully hide/display the "Menu" (First row) according to scroll back status.

However, we would like the full header to become sticky only when "Search bar" (Second row) is out of viewport.
At the moment, the header become sticky when any children of the component is out of viewport.

Question :
Is there any way to say "Sticky" which component it should listen position on ?

For example :

<Sticky target={customRef}>
     <ThisContentIsOptional />
     <ThisContentShouldSticky ref={customRef} />
</Sticky>

Note :
We tried to nest Sticky components in order to listen "STATUS" event of children and enable/disable parent Sticky but as soon as "Sticky" is not enabled, "onStateChange" is never called.

Ex :

<Sticky enabled={childrenSticky}>
     <ThisContentIsOptional />
     <Sticky 
         enabled={false}
         onStateChange={status => {
                if (status.status === Sticky.STATUS_FIXED) {
                  setChildrenSticky(true);
                } else {
                  setChildrenSticky(false);
                }
              }}
     >
       <ThisContentShouldSticky />
     </Sticky>
</Sticky>

Thansk in advance for your help.
Yours faithfully,
LCDP