Unable to get sub categories in gatsby. Showing blank

#help

Hi I have tried to make categories and sub categories but unable to fetch the header menu sub categories items from gatsby grapql using StaticQuery. Tried so many times but getting blank items. I did console log the header menu and it shows array of repeating items.

Please help me out from this situation.

class SubCat extends React.Component{
constructor(props){
super(props);
// console.log(props.data);
}
render(){
return(
<>

SHOP BY CATEGORIES
{value.name}

</>
)
}
}

class Header extends React.Component {
constructor(props){
super(props);
this.state = {
value: '',
showSearchBar: false,
showMenu: false
};
this.handleClickOutside = this.handleClickOutside.bind(this);
}

handleHover = () => {
    this.setState( { showMenu: true });
}

handleLeave = () => {
    this.setState( { showMenu: false });
}


render() {
    return(
    <StaticQuery
        query={graphql`
        query{
            allMobileMenuData{
            edges{
                node{
                payload {
                    subcategory {
                    name
                    slug
                    }
                    collections {
                    name
                    slug
                    }
                    slug
                    name
                }
                }
            }
            }
        }
    `}
    render={data => (
            <>
            <div className="header-d">
                    <div className="header-link-logo-d">
                        <Link to="/" >
                            <Logo fill="#C0B394" width="100px" height="100px" />
                        </Link>
                    </div>
                        <ul className="header-right-section-d">
                        <li><a href="#" onClick={()=>this.onSclick()}>Search</a></li>
                            <li><a href="javascript:void(0)">Cart</a></li>
                        </ul>

                <nav>
                    <ul className="main-menu-d">
            {
            data.allMobileMenuData.edges.map((data, index) => {
                if(data.node.payload.subcategory !==''){
                // console.log(data.node.payload.subcategory)
                return (
                    <li className="nav_submenu_item" key={index} onMouseLeave={this.handleLeave}><a onMouseEnter={this.handleHover}><Link to={data.node.payload.slug}>{data.node.payload.name}</Link></a>
                        {
                            this.state.showMenu &&
                        <SubCat data={data.node.payload.subcategory}  />
                        }
                        </li>
                    )
                 }else{
                        return(
                            <>
                            </>
                        )
                    }
            }
                )
            }
            </ul>
                </nav>
                </div>
            </>
            )
            }
        />
    )
}

}

export default Header