Gatsby doesn't handle context

[developdeez]

Description

I noticed breadcrumbs not working. I went to make my own when I realized Gatsby messes up React's Context.

Seems to be related to Gatsby not handling context well.
My context

import { createContext, useState, useMemo } from "react";
const BreadcrumbsContext = () => {
  const [breadcrumbs, setBreadcrumbs] = useState([]);
  const value = useMemo(() => ({ breadcrumbs, setBreadcrumbs }), [
    breadcrumbs,
    setBreadcrumbs,
  ]);
  return createContext(value);
};

export default BreadcrumbsContext;
My usage:

const { breadcrumbs, setBreadcrumbs } = useContext(breadcrumbsContext());
 useEffect(() => {
   const crumbIdx = breadcrumbs.findIndex((crumb) => crumb.text === title);
   if (crumbIdx < 0) {
     setBreadcrumbs([
       ...breadcrumbs,
       { text: title, href: location.pathname },
     ]);
   }
 }, []);

Steps to reproduce

Create a context and try to edit it between pages while expecting it to persist

Expected result

Updated Context on each page

Actual result

It reverts to old

Environment

System:
OS: macOS 11.0.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.18.3 - /usr/local/bin/node
npm: 6.14.6 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 87.0.4280.88
Safari: 14.0.1
npmPackages:
gatsby: ^2.29.1 => 2.26.1
gatsby-image: ^2.8.0 => 2.5.0
gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5
gatsby-plugin-apollo: ^3.0.2 => 3.0.2
gatsby-plugin-breadcrumb: ^10.0.0 => 10.0.0
gatsby-plugin-prettier-eslint: ^1.0.4 => 1.0.4
gatsby-plugin-sass: ^2.8.0 => 2.5.1
gatsby-plugin-sharp: ^2.11.1 => 2.8.0
gatsby-plugin-styled-components: ^3.7.0 => 3.4.0
gatsby-plugin-transition-link: ^1.20.5 => 1.20.5
gatsby-plugin-use-query-params: ^1.0.1 => 1.0.1
gatsby-source-filesystem: ^2.8.0 => 2.5.0
gatsby-transformer-json: ^2.8.0 => 2.5.0
gatsby-transformer-sharp: ^2.9.0 => 2.6.0
npmGlobalPackages:
gatsby-cli: 2.12.113