diff --git a/src/renderer/components/scroll-spy/__tests__/scroll-spy.test.tsx b/src/renderer/components/scroll-spy/__tests__/scroll-spy.test.tsx
index 341f786355..512d3251ba 100644
--- a/src/renderer/components/scroll-spy/__tests__/scroll-spy.test.tsx
+++ b/src/renderer/components/scroll-spy/__tests__/scroll-spy.test.tsx
@@ -39,11 +39,11 @@ describe("<ScrollSpy/>", () => {
     expect(observe).toHaveBeenCalled();
   });
 
-  it("renders navigation component", async () => {
-    const { queryByTestId } = render(<ScrollSpy render={navigation => (
+  it("renders dataTree component", async () => {
+    const { queryByTestId } = render(<ScrollSpy render={dataTree => (
       <div>
         <nav>
-          <RecursiveTreeView data={navigation}/>
+          <RecursiveTreeView data={dataTree}/>
         </nav>
         <section id="application">
           <h1>Application</h1>
@@ -74,12 +74,12 @@ describe("<ScrollSpy/>", () => {
 });
 
 
-describe("<TreeView/> navigation inside <ScrollSpy/>", () => {
+describe("<TreeView/> dataTree inside <ScrollSpy/>", () => {
   it("contains links to all sections", async () => {
-    const { queryByTitle } = render(<ScrollSpy render={navigation => (
+    const { queryByTitle } = render(<ScrollSpy render={dataTree => (
       <div>
         <nav>
-          <RecursiveTreeView data={navigation}/>
+          <RecursiveTreeView data={dataTree}/>
         </nav>
         <section id="application">
           <h1>Application</h1>
@@ -102,10 +102,10 @@ describe("<TreeView/> navigation inside <ScrollSpy/>", () => {
   });
 
   it("not showing links to sections without id", async () => {
-    const { queryByTitle } = render(<ScrollSpy render={navigation => (
+    const { queryByTitle } = render(<ScrollSpy render={dataTree => (
       <div>
         <nav>
-          <RecursiveTreeView data={navigation}/>
+          <RecursiveTreeView data={dataTree}/>
         </nav>
         <section id="application">
           <h1>Application</h1>
@@ -127,10 +127,10 @@ describe("<TreeView/> navigation inside <ScrollSpy/>", () => {
   });
 
   it("expands parent sections", async () => {
-    const { queryByTitle } = render(<ScrollSpy render={navigation => (
+    const { queryByTitle } = render(<ScrollSpy render={dataTree => (
       <div>
         <nav>
-          <RecursiveTreeView data={navigation}/>
+          <RecursiveTreeView data={dataTree}/>
         </nav>
         <section id="application">
           <h1>Application</h1>
@@ -160,10 +160,10 @@ describe("<TreeView/> navigation inside <ScrollSpy/>", () => {
   });
 
   it("skips sections without headings", async () => {
-    const { queryByTitle } = render(<ScrollSpy render={navigation => (
+    const { queryByTitle } = render(<ScrollSpy render={dataTree => (
       <div>
         <nav>
-          <RecursiveTreeView data={navigation}/>
+          <RecursiveTreeView data={dataTree}/>
         </nav>
         <section id="application">
           <h1>Application</h1>
diff --git a/src/renderer/components/scroll-spy/scroll-spy.tsx b/src/renderer/components/scroll-spy/scroll-spy.tsx
index e9ab51acc0..9b57368d30 100644
--- a/src/renderer/components/scroll-spy/scroll-spy.tsx
+++ b/src/renderer/components/scroll-spy/scroll-spy.tsx
@@ -7,6 +7,12 @@ interface Props extends React.DOMAttributes<HTMLElement> {
   rootMargin?: string // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer
 }
 
+ScrollSpy.defaultProps = {
+  // Shrinking root area from the bottom
+  // Allows to fire observer event only if target scrolled up to top of the page)
+  rootMargin: "0px 0px -85%"
+};
+
 export function ScrollSpy(props: Props) {
   const parent = useRef<HTMLDivElement>();
   const sections = useRef<NodeListOf<HTMLElement>>();
@@ -93,8 +99,3 @@ export function ScrollSpy(props: Props) {
   );
 }
 
-ScrollSpy.defaultProps = {
-  // Shrinking root area from the bottom
-  // Allows to fire observer event only if target scrolled up to top of the page)
-  rootMargin: "0px 0px -85%"
-};