why do we use curly braces while defining constant variable in react js?

i write this following code to fetch the title from props . Before:

export default function Articleinfo(props) {
    const  {edge}  = props.data.allNodeArticle;
    
    return(
        <>
          <div>
              <h1>Title:{edge[0].title}</h1>
              <h2>info:</h2>
          </div>
        </>
    );
};

i getting this error : Cannot read properties of undefined (reading '0')

But After : When i remove the curly braces it worked

export default function Articleinfo(props) {
    const  edge  = props.data.allNodeArticle;
    console.log(edge.nodes[0].title);
    const Title = edge.nodes[0].title;
    return(
        <>
          <div>
              <h1>Title:{edge.nodes[0].title}</h1>
              <h2>info:</h2>
          </div>
        </>
    );
};

Can some explain me why this happen? what is the concept behind it?