Incremental numeral increases in the anchor slug using using gatsby-toc example

I'm using a slightly visually modified version of the ToC example in this repository. Everything works fine except for one thing, if I click the same anchor link, it will add a 1, and then incrementally increase that number on each click like:

/#apples
/#apples-1
/#apples-2

If I then click another anchor link, it will keep on adding numbers to the said anchor:
bananas-3

The component I created looks like this:

```
import React from 'react'
import Slugger from 'github-slugger'
import { Link } from 'gatsby';
import { Typography, Card, CardContent } from '@material-ui/core';
import styled from '../styled';

const slugger = new Slugger()

const ToCMenu = styled('a')`
&{
text-decoration: none;
color: inherit;
}
&:hover {
outline: 0;
text-decoration: underline;
color: #f4813a;
}
`;

export default ({ headings }) => (



Table of Contents

{headings
.filter(heading => heading.depth !== 1)
.map(heading => (



{heading.value}

))}



)
```