Objects are not valid as a React child when wrapping App in mobx RootStoreProvider

Question

Trying to get Mobx running with my react app. When I wrap the entire app in the RootStoreProvider I get the following error: Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead. Whatever children is its not a react component and I can't quite figure out why (I am aware this issue is because children is an object)... I am trying to follow several example tutorials here and here which all seem to have the same function more or less:

export function RootStoreProvider({ children }: { children: ReactNode }) {
  // only create root store once (store is a singleton)
  const root = store ?? new RootStore();

  return <StoreContext.Provider value={root}>{children}</StoreContext.Provider>;
}

Here is what my index.tsx file looks like:

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <RootStoreProvider>
        <App />
      </RootStoreProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Below I am including all my store/provider files:

RootStore.tsx

import React from 'react';
import DeckStore from './DeckStore';

export default class RootStore {
  deckStore: DeckStore;

  constructor() {
    this.deckStore = DeckStore(this);
  }
}

DeckStore.tsx

import { RootStore } from './RootStore';
import { makeAutoObservable } from 'mobx';

const DeckStore = (root: RootStore) => {
  return makeAutoObservable({
    decks: [{
      title: 'somedeck'
    }],
    addDeck: (deck) => {
      root.deckStore.decks.push(deck);
    },
  });
}

export default DeckStore;

provider.tsx

import React, { createContext, ReactNode, useContext } from "react";
import RootStore from "../stores/RootStore";

let store: RootStore;
const StoreContext = createContext<RootStore | undefined>(undefined);
StoreContext.displayName = "StoreContext";

export function useRootStore() {
  const context = useContext(StoreContext);
  if (context === undefined) {
    throw new Error("useRootStore must be used within RootStoreProvider");
  }

  return context;
}

export const useDeckStore = () => {
  const { deckStore } = useRootStore();
  return deckStore;
}

export function RootStoreProvider({ children }: { children: ReactNode }) {
  // only create root store once (store is a singleton)
  const root = store ?? new RootStore();

  return <StoreContext.Provider value={root}>{children}</StoreContext.Provider>;
}