How can i use the orthographic camera with the new grid correctly ?

[ymolists]

Not sure what i am missing here. The perspective camera works as expected. My problem is figuring how to use an orthographic camera with the new grid correctly.

How do i position the orthographic camera correctly please ?

if i use the props to enable orthographic camera as shown here:

    <Canvas
      shadows
      orthographic
      camera={{ position: [-50, 50, 100], zoom: 140 }}
    >

I get the box but i cant get the grid as you can see below. as you can see the grid is missing

when i try to use a component as in:

    <Canvas
      shadows
    >
      <orthographicCamera
        makeDefault
        zoom={100}
        position={[-50, 50, 100]}
        left={-20}
        right={20}
        top={20}
        bottom={-20}
      />

This is what i get :

Here is the full code

import { useLayoutEffect } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import {
  Center,
  AccumulativeShadows,
  RandomizedLight,
  OrbitControls,
  Environment,

  //
  Grid,
} from "@react-three/drei";

import { useControls } from "leva";

export function Suzi() {
  const { gridSize, ...gridConfig } = useControls("Grid", {
    gridSize: [10, 10],
    cellSize: { value: 1, min: 0, max: 10, step: 1 },
    cellThickness: { value: 1, min: 0, max: 5, step: 0.1 },
    cellColor: "#6f6f6f",
    sectionSize: { value: 3.3, min: 0, max: 10, step: 0.1 },
    sectionThickness: { value: 1.5, min: 0, max: 5, step: 0.1 },
    sectionColor: "#9d4b4b",
    fadeDistance: { value: 25, min: 0, max: 100, step: 1 },
    fadeStrength: { value: 1, min: 0, max: 1, step: 0.1 },
    followCamera: false,
    infiniteGrid: true,
  });

  return (
    <Canvas
      shadows
      //
      // orthographic
      camera={{ position: [8, 15, 8], fov: 25 }}
      // camera={{ position: [-50, 50, 100], zoom: 140 }}
    >
      {/* <orthographicCamera
        makeDefault
        zoom={100}
        position={[-50, 50, 100]}
        left={-20}
        right={20}
        top={20}
        bottom={-20}
      /> */}

      <Grid position={[0, -0.01, 0]} args={gridSize} {...gridConfig} />

      <group position={[0, 0, 0]}>
        <Center top position={[0, 0, 0]}>
          <mesh castShadow>
            <boxGeometry args={[1, 0.5, 1]} />
            <meshStandardMaterial color="indianred" />
          </mesh>
        </Center>
        <AccumulativeShadows
          temporal
          frames={100}
          colorBlend={2}
          toneMapped={true}
          alphaTest={0.9}
          opacity={2}
          scale={12}
        >
          <RandomizedLight
            amount={8}
            radius={4}
            ambient={0.5}
            intensity={1}
            position={[5, 5, -10]}
            bias={0.001}
          />
        </AccumulativeShadows>
      </group>
      <OrbitControls />
      <Environment preset="city" />
    </Canvas>
  );
}

[ymolists]

Also i want to me able to display the x,y,z location of the camera on the leva usecontrol. This way i can save that location/zoom aand use it at startup time next time in the code.