How to Create Scroll Indicator using ReactJS ?

// Filename - App.js

import ScrollIndicator from "./components/ScrollIndicator";

function App() {
    return <ScrollIndicator />;
}

export default App;

// Filename - components/ScrollIndicator.js

import React, { useState, Fragment } from "react";
import {
    Container,
    ProgressBar,
    ScrollContent,
    Heading,
    Heading2,
} from "./Styles";
const ScrollIndicator = () => {
    const [scroll, setScroll] = useState(0);

    const onScroll = () => {
        const Scrolled = document.documentElement.scrollTop;
        const MaxHeight =
            document.documentElement.scrollHeight -
            document.documentElement.clientHeight;
        const ScrollPercent = (Scrolled / MaxHeight) * 100;
        setScroll(ScrollPercent);
    };

    window.addEventListener("scroll", onScroll);

    return (
        <Fragment>
            <Container>
                <ProgressBar
                    style={{ width: `${scroll}%` }}
                ></ProgressBar>
            </Container>
            <ScrollContent>
                <Heading>GeeksforGeeks</Heading>
                <Heading2>
                    React Example for Scroll Indicator
                </Heading2>
            </ScrollContent>
        </Fragment>
    );
};

export default ScrollIndicator;

// Filename - components/Styles.js

import styled from "styled-components";

export const Container = styled.div`
    background-color: black;
    height: 10px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    border-radius: 10px;
`;

export const ProgressBar = styled.div`
    height: 10px;
    background-color: green;
    border-radius: 10px;
`;
export const ScrollContent = styled.div`
    overflowy: scroll;
    height: 2000px;
`;

export const Heading = styled.h1`
    text-align: center;
    color: green;
    font-size: 3rem;
`;
export const Heading2 = styled.h1`
    text-align: center;

    font-size: 2rem;
`;