Gatsbyで超絶スムーズに動く目次のコンポーネント実装する

...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          ...
          {
            resolve: `gatsby-remark-autolink-headers`,
            options: {
              icon: false, //Hタグ横のアイコンを消す場合false
            },
          },
          ...
        ]
      }
    },
    {
       resolve: "gatsby-plugin-anchor-links",
       options: {
            offset: -100 //スクロール先のオフセット
       }
    },
...        

/** @jsx jsx */
import { jsx } from "theme-ui"
import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import { AnchorLink } from "gatsby-plugin-anchor-links";

export const TableOfContents: React.FC<{
  className?: string, 
  slug: string,
}> = props => (
  <StaticQuery
    query={graphql`
      {
        allMarkdownRemark {
          edges {
            node {
              headings {
                depth
                id
                value
              }
              fields {
                slug
              }
            }
          }
        }
        
      }
    `}
    render={(data: any) => {
      //graphqlでは全件取得しているため対象を特定
      const headings = data.allMarkdownRemark.edges.find((n:any)=>{
        return n.node.fields.slug == props.slug })?.node?.headings;

      return (headings && <div sx={{display: 'grid',gap: 2}}>
        {headings.map((x:any)=><AnchorLink         
            className={props.className??'' + ' toc-link toc-depth-'+x.depth}

            //末尾にスラッシュを付ける場合はこっち
            to={"/" + props.slug + '#' + x.id}

            //末尾にスラッシュを付けない場合はこっち
            //to={"/" + props.slug.replace('/','') + '#' + x.id}

            stripHash //#表示を追加しない

            sx={{     //theme-uiでスタイルを設定
              display: 'block',
              ml: ((Number(x.depth)-2)*15)+'px',
              textDecoration: 'none',
              fontSize:'0.95rem',
              lineHeight: '1.1rem',
              '&:hover': { textDecoration: 'underline' }
            }}
          >
            {x.value}
          </AnchorLink>
        )}
      </div>);
    }}
  />
);

<TableOfContents slug={post.fields.slug} />