react components state null gatsby

Question

I'm stuck with the problem that i'm getting the null state in components and scroll in the navigation menu does not work. I assume that the problem is in the Scrollto Component but still have no clue how to fix it. It's a Navigation list that should take data from section list and smooth-scrolling after clicking to the chosen section. If there is better way to implement my code i will be happy to hear.

NavMenu Component

import React, { useState } from "react"
import scrollTo from "gatsby-plugin-smoothscroll"
import Scrollspy from "react-scrollspy"
import { useSiteMetadata } from "../hooks/use-site-metadata"

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faBars } from "@fortawesome/free-solid-svg-icons"

export default function () {
  const [isVisible, setVisibility] = useState(false)

  const { menuItems } = useSiteMetadata()

  let showStyle = null
  if (isVisible) {
    showStyle = { transform: "scaleY(1)" }
  } else {
    showStyle = null
  }

  return (
    <nav className="nav">
      <button
        className="btn-tog"
        id="toggle-btn"
        href="/#"
        title="Menu"
        onClick={() => setVisibility(!isVisible)}
      >
        <FontAwesomeIcon icon={faBars} />
      </button>

      <Scrollspy
        className=" nav-ul navList list flex"
        style={showStyle}
        items={menuItems.map(a => a.path)}
        currentClassName="current"
        offset={-100}
      >
        {menuItems.map((value, index) => {
          return (
            <li className="mr3" key={index}>
              <button
                onClick={() => 
                  {
                  scrollTo("#" + value.path)
                  setVisibility(0)
                }}
              >
                {value.label}
              </button>
            </li>
          )
        })}
      </Scrollspy>
    </nav>
  )
}

use-site-metadata

import { useStaticQuery, graphql } from "gatsby"
export const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query MyQuery {
        site {
          siteMetadata {
            title
            description
            author {
              name
            }
            sections
            favicon
            logo
            menuItems {
              path
              label
            }
          }
        }
      }
    `
  )
  return site.siteMetadata
}

store-data

module.exports = {
  siteMetadata: {  
    /* Choose and arrange the sections to be displayed on the landing page */
    sections: [`hero`, `about`, `mappingItems`, `contact`],

    /* Configure the navigation menu */
    menuItems: [
      { path: "hero", label: "Home" },
      { path: "about", label: "About" },
      { path: "mappingItems", label: "MappingItems" },
      { path: "contact", label: "Contact" },
    ],

index.js

import React from "react"
import Layout from "../components/layout"
import Hero from "./Hero"
import About from "./about"
import Contact from "./contact"
import MappingItems from "./mappingItems"




import { useSiteMetadata } from "../hooks/use-site-metadata"

export default () => {
  const { sections } = useSiteMetadata()
  const availableSections = {
    hero: Hero,
    about: About,
    mappingItems: MappingItems,
    contact: Contact,
  }

  return (
    <>
      <Layout>
        {sections.map(section => {
          let Tagname = availableSections[section]
          return <Tagname />
        })}
      </Layout>
    </>
  )
}

Answer 1

The problem was that it should be in sections (components) that is in availableSections wrapper section with same id.