Next.js: document is not defined when using react-org-chart

I am trying to use react-org-chart but I keep getting this error.

document is not defined

I'm using Next.js. Please see my code below:

import SidebarDesktop from "../components/layout/sidebarDesktop";
import SidebarMobile from "../components/layout/sidebarMobile";
import StickyHeader from "../components/layout/stickyHeader";
import navigationList from "../components/layout/navigationList";
import { Tree, TreeNode } from "react-organizational-chart";
import React, { useState, useEffect } from "react";

export default function OrganizationalChart() {
    return (
        <div>
            <SidebarMobile menu={navigationList()} loc={asPath} />
            <SidebarDesktop menu={navigationList()} loc={asPath} />
            <div className="md:pr-52 flex flex-col flex-1">
                <StickyHeader />
                <main className="py-10 space-y-6">
                    <Tree
                        label="Root"
                        lineBorderRadius="10px"
                        lineColor="green"
                        lineHeight="30px"
                        lineWidth="3px"
                    >
                        <TreeNode label={<div>Child 1</div>}>
                            <TreeNode label={<div>Grand Child</div>} />
                        </TreeNode>
                        <TreeNode label={<div>Child 2</div>}>
                            <TreeNode label={<div>Grand Child</div>}>
                                <TreeNode
                                    label={<div>Great Grand Child 1</div>}
                                />
                                <TreeNode
                                    label={<div>Great Grand Child 2</div>}
                                />
                            </TreeNode>
                        </TreeNode>
                        <TreeNode label={<div>Child 3</div>}>
                            <TreeNode label={<div>Grand Child 1</div>} />
                            <TreeNode label={<div>Grand Child 2</div>} />
                        </TreeNode>
                    </Tree>
                </main>
            </div>
        </div>
    );
}

I want to create an organizational chart in my react project. If you have better suggestion please send me.