Why TF is this not working ...

counter-component.tsx

import { JSX } from 'solid-js';
import { CounterContextProvider, useCounterContext } from '../contexts/counter';

export function WithContext(): JSX.Element {
  const [ { count }, { increment, decrement } ] = useCounterContext();

  return (
    <CounterContextProvider>
      <span>{count}</span>
      <button onClick={increment}>+</button>
      <button onClick={decrement} >-</button>
    </CounterContextProvider>
  )
}

counter-context.tsx

import { JSX, createContext, useContext } from 'solid-js';
import { createStore } from 'solid-js/store';

interface ICounterModel {
  count: number;
}

interface ICounterAPI {
  increment(): void;
  decrement(): void;
}

type CounterContextModel = [ ICounterModel, ICounterAPI ];

export const CounterContext = createContext<CounterContextModel>([
  { count: 0 },
  {
    increment() {},
    decrement() {},
  },
]);

export function CounterContextProvider(props: { count?: number; children?: JSX.Element }) {
  const [ state, setState ] = createStore<ICounterModel>({ count: props.count || 0 });
  const counter: CounterContextModel = [
    state,
    {
      increment() {
        console.log('increment');
        setState('count', (c) => c + 1)
      },
      decrement() {
        console.log('decrement');
        setState('count', (c) => c - 1)
      },
    },
  ];

  return (
    <CounterContext.Provider value={counter}>
      {props.children}
    </CounterContext.Provider>
  );
}

export function useCounterContext() {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error("useCounterContext: cannot find a CounterContext")
  }
  return context;
}

sources.txt

https://docs.solidjs.com/reference/component-apis/create-context