Gatsby Link activeClassName

Link.js

<ClassNames>
  {({ css }) => (
    <Styled.ul
      sx={{
        padding: 0,
        margin: 0,
      }}
    >
      {data.allMdx.edges.map((item, index) => {
        const { name } = item.node.parent

        return (
          <Link
            key={index}
            to={`/${name === "index" ? "" : name}`}
            sx={{
              color: "mutedText",
              display: "flex",
              paddingTop: 3,
              paddingBottom: 3,
              textDecoration: "none",
              textTransform: "capitalize",
              transition: ".2s linear all",
              "::before": {
                backgroundColor: "background",
                content: `""`,
                marginTop: -3,
                marginBottom: -3,
                marginRight: 3,
                width: 2,
              },
              ":hover": {
                color: "text",
                backgroundColor: "mutedLight",
              },
            }}
            activeClassName={css`
              color: ${context.theme.colors.text} !important;
              &::before {
                background-color: ${context.theme.colors.primary} !important;
              }
            `}
          >
            {name === "index" ? "dashboard" : name}
          </Link>
        )
      })}
    </Styled.ul>
  )}
</ClassNames>