Headers are sticking out of container

I'm having trouble setting sticky headers in my div container. My scenario is very similiar to your stacked example but I dont put my sticky header in window but in custom div on my page. Im getting list of sticky containers this way

_.forEach(data, (value, key) => {
  stickyData.push(
    <StickyContainer key={key}>
      <Sticky stickyContainer="#fixed-div">
        {({
          isSticky,
          wasSticky,
          style,
          distanceFromTop,
          distanceFromBottom,
          calculatedHeight
        }) => {
          return (
            <div style={{ ...style, height: 40, backgroundColor: "#e0e0eb" }}>
              <h2 style={{ lineHeight: "40px", padding: "0 15px", margin: 0 }}>
                <span className="pull-left">Header title</span>
              </h2>
            </div>
          );
        }}
      </Sticky>

      {data[key] &&
        data[key].map(item => {
          return <CustomListItem />;
        })}
    </StickyContainer>
  );
});

And I use that contianers like this

<div id="fixed-div" className={css(styles.containerStyle)}>
       {stickyHeadersList}
</div>

My css for div is

height: 400,
overflowY: 'auto',
margin:'10px

The problem is that headers doesnt stick at all, component acts as normal scrollable div. Hope you understand what is my problem here, if you dont pls tell and I'll try to explain it better

UPDATE I switched

<div id="fixed-div" className={css(styles.containerStyle)}>
       {stickyHeadersList}
</div>

with

<StickyContainer style={{ height: 400, overflowY: 'auto', background: '#ddd'}}>
       {stickyHeadersList}
</StickyContainer>

and my header is changing and sticking but on wrong position (way outside of container)

captivationsoftware / react-sticky

Headers are sticking out of container #184