JavaScript Nested Object Deconstruction "Cannot read properties of null" with default value

I'm trying to deconstruct an object in JavaScript. I've assigned default values in the deconstruction but I'm still getting the following error:

React Router caught the following error during render TypeError: Cannot read properties of null (reading 'responseTimePoints')

This is my deconstruction code:

    const testRun = useTestRunModel();

    const {
        id: testRunId,
        graphData: { responseTimePoints = [] } = {},
    } = testRun || {};

This is the output of the testRun object:

Essentially, I'd like responseTimePoints to be set to an empty array in the event that testRun / testrun.graphData / testRun.graphData.responseTimePoints are null or undefined.

I'm not sure if it matters, but I am using React 18.2 with TypeScript 5.1.6, and this is my tsconfig.json:

  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "target": "es2015",
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "baseUrl": "./",
    "rootDir": "./",
    "types": []
  }

Default initialisers in destructuring (and function parameters) only apply when the value is undefined (or the property/argument is absent altogether), not when it is null

Use nullish coalescing instead:

const testRun = useTestRunModel();

const testRunId = testRun?.id;
const responseTimePoints = testRun?.graphData?.responseTimePoints ?? [];