Sticky content scrolling up into fixed menu header Semantic UI - reactjs

Question

So I've set up some sticky rail content using an example for the SUIR docs. However, when scrolling the main content, the rail content scrolls into my fixed header.
Do I need to set more rules on the style prop for <Rail>?
Codesandbox link here
To view the issue, navigate to Docs from the menu bar.
The <Rail> component is at the bottom of Overview.js file
export default class Overview extends Component {
contextRef = createRef();
render() {
return (
<div>
<FixedMenuLayout />
<Grid centered columns={3} style={{ marginTop: "7em" }}>
<Grid.Column>
<Ref innerRef={this.contextRef}>
<Segment>
<Docs />
<Rail position="left">
<Sticky context={this.contextRef}>
<Header as="h3">Getting Started</Header>
<List style={{ padding: "5px" }}>
<List.Item>Overview</List.Item>
<List.Item>Examples</List.Item>
<List.Item>Tutorial</List.Item>
</List>
<Header as="h3">How To</Header>
<List style={{ padding: "5px" }}>
<List.Item>Building</List.Item>
<List.Item>Standalone</List.Item>
<List.Item>Deployment</List.Item>
</List>
<Header as="h3">Development</Header>
<List style={{ padding: "5px" }}>
<List.Item>Road Map</List.Item>
<List.Item>Upcoming Features</List.Item>
</List>
</Sticky>
</Rail>
<Rail position="right">
<Sticky context={this.contextRef}>
<Header as="h3">Overview</Header>
<List style={{ padding: "5px" }}>
<List.Item>Overview</List.Item>
<List.Item>Examples</List.Item>
<List.Item>Tutorial</List.Item>
</List>
</Sticky>
</Rail>
</Segment>
</Ref>
</Grid.Column>
</Grid>
</div>
);
}
}

Answer 1

Well a rather easy fix just didn't see the correct prop that handles this exact issue.
The offset prop for <Sticky> needs to be set to an appropriate value.
In my case,
<Sticky offset={90} context={this.contextRef}>