TypeError：Object（...）不是一个函数-ReactJS / GatsbyJS

Question

最初，我为组件提供以下代码时，根本没有错误

function Menu(props) {
 
  const { menuLinks } = props.data.site.siteMetadata;
  
  return (
<div></div>
  );
};

export default props => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            menuLinks {
              name
              link
            }
          }
        }
      }
    `}
    render={data => <Menu data={data} />}
  />
);

但是当我在menuLinks常量下添加const [dropdown, setDropdown] = useState(false);时，会出现如下所示的错误

× ←→页面上2个错误中的1个

TypeError: Object(...) is not a function
Menu
E:/path/src/components/Menu.js:5
  2 | import { graphql, StaticQuery, Link } from 'gatsby';
  3 | import Dropdown from './Dropdown'
  4 |  
> 5 | function Menu(props) {
  6 |  
  7 |   const { menuLinks } = props.data.site.siteMetadata;
  8 |   const [dropdown, setDropdown] = useState(false);

任何为此找到解决方案的帮助都很好！！谢谢