Vue3 / typescript: how to type component props for 2d array

I am converting an existing vue project (written in JS) to Typescript. I am mostly getting on well, but am having a problem with passing an array as props to a component.
I am using Composition API / SFC.

For one component (which doesn't need an array), I have this structure:

<script setup lang="ts">
  import type { TrackTile } from '../../env.d';

  interface Props {
    tile: TrackTile,
    item: number
  }
  const props = defineProps<Props>()
  console.log('keyItem script setup');
  console.log(props.tile);

</script>

This transpiles without errors and then runs fine, so I assume my basic syntax is OK here.
But another component mainGrid needs to be given an array of TrackCell types:

<script setup lang="ts">

  import type { TrackCell } from '../../env.d';
  interface Props {
    grid: TrackCell[][];
  }
  const props = defineProps<Props>()

  console.log('mainGrid script setup');
  console.log(props.grid[0][0]);
    
</script>

The component is called from its parent like this:

 <mainGrid :grid = trackGrid>
 </mainGrid>

In this case I get an error that props.grid[0] is undefined.

As a check to ensure that the trackGrid array (and its constituent trackCells) was defined and populated correctly, I temporarly moved the template for the mainGrid component into its parent, and everything then works as expected. So it appears that it's just the `defineProps' section which is incorrect.

trackGrid is reactive:

export const trackGrid: TrackCell[][] = reactive([] );

I don't think that's a typescript error, most likely the problem occurs in the log statement:

console.log(props.grid[0][0]);

Probably grid is an empty array after initialization?

Try

console.log(props.grid[0]?.[0]);

or remove the statement altogether

As a quick fix, you could initialize trackGrid with an empty row:

export const trackGrid: TrackCell[][] = reactive([[]]);

Turns out there wasn't any problem with the component props as posted!
I added console.log(props.grid[0][0]); to solve a problem with the grid cells being undefined when they were used in the template.
But that was a silly thing to do because of course the component's <setup> is called before the data has been fetched (in onBeforeMount).

After adding that erroneous debug line, I had corrected the actual error: I changed the declation of the array from

export const trackGrid: TrackCell[][] = reactive([...Array(8)].map(_=>Array(8)) );

to

export const trackGrid: TrackCell[][] = reactive([] );

but then I didn't remove the erroneous debug log!

Still not sure through if it should be

export const trackGrid: TrackCell[][] = reactive([] );

or

export const trackGrid: TrackCell[][] = reactive([[]] );

as both seem to work.

Anyway I hope that my original question may help someone in the future deal with arrays using TS with Vue.