Unable to access certain info from Props. Instead tells me that it is a typeerror: and cannot read properties of undefined

I am writing a program that works as a Google docs clone type thing. I am currently programming the header of the text editor itself where it says the title and your profile picture. For the title, it obviously cannot be hardcoded so I am passing roomMetadata from which contains all the necessary information.

I am using LiveBlocks, Next.Js and Clerk so far at this point in the project.

I will add this all, but I then try to access roomMetadata.title, which is a thing and 100% exists but for some reason says it is undefined. Here's the exact error screenshot.

Image of Error

Here is the rest of my code:

CollaborativeRoom.tsx

"use client";

import { ClientSideSuspense, RoomProvider } from "@liveblocks/react/suspense";
import { Editor } from "@/components/editor/Editor";
import Header from "@/components/Header";
import { SignInButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";
import ActiveCollaborators from "./ActiveCollaborators";
import { useRef, useState } from "react";
import { Input } from "./ui/input";



const CollaborativeRoom = ({
  roomId,
  roomMetadata,
  
}: CollaborativeRoomProps) => {
  const [documentTitle, setDocumentTitle] = useState(roomMetadata.title);
  const [editing, setEditing] = useState(false);
  const [loading, setLoading] = useState(false);

  const containerRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <RoomProvider id={roomId}>
      <ClientSideSuspense fallback={<div>Loading…</div>}>
        <div className="collaborative-room">
          <Header>
            <div
              ref={containerRef}
              className="flex w-fit items-center justify-center gap-2"
            >
              {editing && !loading ? (
                <Input />
              ) : (
                <>
                  <p className="document-title">{roomMetadata.title}</p>
                </>
              )}
            </div>
            <div className="flex w-full flex-1 justify-end gap-2 sm:gap-3">
              <ActiveCollaborators />
              <SignedOut>
                <SignInButton />
              </SignedOut>
              <SignedIn>
                <UserButton />
              </SignedIn>
            </div>
          </Header>
          <Editor />
        </div>
      </ClientSideSuspense>
    </RoomProvider>
  );
};

export default CollaborativeRoom;
function UseRef<T>(arg0: null) {
  throw new Error("Function not implemented.");
}

CollaborativeRoomProps within index.d.ts

declare type CollaborativeRoomProps = {
  roomId: string;
  roomMetadata: RoomMetadata;
  users: User[];
  currentUserType: UserType;
};

RoomMetadata within index.d.ts

declare type RoomMetadata = {
  creatorId: string;
  email: string;
  title: string;
};

I am fairly new to how Stack overflow works, so if you would require any further information, please give me a shout!

this is a tutorial, and the guy said it should say 'Untitled'.

This might also help:

I tried this code and added the extra OR statement.

const [documentTitle, setDocumentTitle] = useState(roomMetadata?.title || ''); and it didn't error but instead gave me a blank title, I am assuming this is because it checked if roomMetadata.title existed and if it didn't it just gave ''. The photo of this result is shown. It doesn't error but just doesn't show the title of the document at the top.

With code showed above and no error but then no title.

Finally, this is what it is supposed to look like.

Expected Result

You are getting a room back from you getDocument function. This returns on object containing a metadata property.

Looking at the rest of your code, you are passing in room.Metadata to the CollaborativeRoom component. If you update this to be room.metadata, the error should go away.