Not able to consume context

import { ComponentProps, createEffect, ParentProps } from "solid-js";
import { createSignal } from "solid-js";
import { createStore } from "solid-js/store";
import ZoomContext from "~/contexts/zoomContext";
import type { Zoom } from "~/interfaces";

type ZoomableContainerProps = ComponentProps<"div"> & ParentProps;
const step = 0.01;

export default function ZoomableContainer({
  children,
  ...props
}: ZoomableContainerProps) {
  const [zoom, setZoom] = createStore<Zoom>({ zoom: 30 / 2 });

  function wheel(event: WheelEvent) {
    event.preventDefault();
    setZoom((lastZoom) => {
      const newZoom = {
        zoom: lastZoom.zoom + event.deltaY * step,
      };
      return { ...newZoom };
    });
  }

  return (
    <ZoomContext.Provider value={zoom}>
      <div on:wheel={wheel} {...props}>
        {children}
      </div>
    </ZoomContext.Provider>
  );
}

import { ComponentProps, createEffect, ParentProps } from "solid-js";
import { createSignal } from "solid-js";
import { createStore } from "solid-js/store";
import ZoomContext from "~/contexts/zoomContext";
import type { Zoom } from "~/interfaces";

type ZoomableContainerProps = ComponentProps<"div"> & ParentProps;
const step = 0.01;

export default function ZoomableContainer({
  children,
  ...props
}: ZoomableContainerProps) {
  const [zoom, setZoom] = createStore<Zoom>({ zoom: 30 / 2 });

  function wheel(event: WheelEvent) {
    event.preventDefault();
    setZoom((lastZoom) => {
      const newZoom = {
        zoom: lastZoom.zoom + event.deltaY * step,
      };
      return { ...newZoom };
    });
  }

  return (
    <ZoomContext.Provider value={zoom}>
      <div on:wheel={wheel} {...props}>
        {children}
      </div>
    </ZoomContext.Provider>
  );
}

      ...
      <div class="row-start-2 row-end-4 col-start-5 -col-end-1 h-full">
        <ZoomableContainer
          class="w-full h-full"
        >
          <ZoomingText />
        </ZoomableContainer>
      </div>
      ...

      ...
      <div class="row-start-2 row-end-4 col-start-5 -col-end-1 h-full">
        <ZoomableContainer
          class="w-full h-full"
        >
          <ZoomingText />
        </ZoomableContainer>
      </div>
      ...

export function ZoomingText() {
  const zoom = useContext(ZoomContext);
  console.log(zoom);

  return (
    <div class="font-[Geist] mt-2 text-sm opacity-70">
      delta: {zoom?.zoom ?? 0}
    </div>
  );
}

export function ZoomingText() {
  const zoom = useContext(ZoomContext);
  console.log(zoom);

  return (
    <div class="font-[Geist] mt-2 text-sm opacity-70">
      delta: {zoom?.zoom ?? 0}
    </div>
  );
}