Getting "Server Error TypeError: Cannot read properties of undefined (reading '0')"

I'm making my first ever react nextjs project to learn and I'm running into problems with this error. It is a wordle game so I'm using state to update the board. I have the state in the _app.js file and I'm using the createContext hook to access it in the components.

Here's app:

import { boardDefault } from '../components/DefaultBoard.jsx';
import Board from "../components/Board.jsx"
import Keyboard from "../components/Keyboard.jsx"
import "../styles/globals.css"

export const AppContext = createContext();

function MyApp() {
  const [board, setBoard] = useState(boardDefault);

  return (
  <div className = "App"> 
    <nav>
      <h1>Wordle</h1> 
    </nav> 
    <AppContext.Provider value = {{board, setBoard}}>
      <Board /> 
      <Keyboard /> 
    </AppContext.Provider>
  </div>
  );
}

export default MyApp

Here's the Letter component:

import React, { useContext } from 'react';
import { AppContext } from "../pages/_app.js";

function Letter({letterPosition, letterAttemptedValue}){
    const { board } = useContext(AppContext);
    //the next line is where the error is pointing to
    const letter = board[letterPosition][letterAttemptedValue];

    return <div className="letter"> {letter} </div>; 
}

export default Letter; 

and Here's the Board component:

import React, { useContext } from 'react';
import { AppContext } from "../pages/_app.js";
import Letter from './Letter';

function Board() {
    return (
        <div className="board">
            <div className="row">
                <Letter letterPosition={0} letterAttemptedValue={0} />
                <Letter letterPosition={1} letterAttemptedValue={0} />
                <Letter letterPosition={2} letterAttemptedValue={0} />
                <Letter letterPosition={3} letterAttemptedValue={0} />
                <Letter letterPosition={4} letterAttemptedValue={0} />
            </div>
            <div className="row">
                <Letter letterPosition={0} letterAttemptedValue={1} />
                <Letter letterPosition={1} letterAttemptedValue={1} />
                <Letter letterPosition={2} letterAttemptedValue={1} />
                <Letter letterPosition={3} letterAttemptedValue={1} />
                <Letter letterPosition={4} letterAttemptedValue={1} />
            </div>
            <div className="row">
                <Letter letterPosition={0} letterAttemptedValue={2} />
                <Letter letterPosition={1} letterAttemptedValue={2} />
                <Letter letterPosition={2} letterAttemptedValue={2} />
                <Letter letterPosition={3} letterAttemptedValue={2} />
                <Letter letterPosition={4} letterAttemptedValue={2} />
            </div>
            <div className="row">
                <Letter letterPosition={0} letterAttemptedValue={3} />
                <Letter letterPosition={1} letterAttemptedValue={3} />
                <Letter letterPosition={2} letterAttemptedValue={3} />
                <Letter letterPosition={3} letterAttemptedValue={3} />
                <Letter letterPosition={4} letterAttemptedValue={3} />
            </div>
            <div className="row">
                <Letter letterPosition={0} letterAttemptedValue={4} />
                <Letter letterPosition={1} letterAttemptedValue={4} />
                <Letter letterPosition={2} letterAttemptedValue={4} />
                <Letter letterPosition={3} letterAttemptedValue={4} />
                <Letter letterPosition={4} letterAttemptedValue={4} />
            </div>
            <div className="row">
                <Letter letterPosition={0} letterAttemptedValue={5} />
                <Letter letterPosition={1} letterAttemptedValue={5} />
                <Letter letterPosition={2} letterAttemptedValue={5} />
                <Letter letterPosition={3} letterAttemptedValue={5} />
                <Letter letterPosition={4} letterAttemptedValue={5} />
            </div>
        </div>
    );
}

export default Board;

Let me know if there's any additional information that would help as this is my first post. I'm currently on react 18.2.0. Thanks!

Edit: I forgot to say that defualtBoard is just an empty 2d array:

const boardDefault = [
    ["","","","",""],
    ["","","F","",""],
    ["","","","",""],
    ["","","","",""],
    ["","","","",""],
    ["","","","",""]
];