How to Fetch Nested Reference Entry with ReactJS? I'm getting error: TypeError: Cannot read property 'fields' of undefined

Hi, I’m new to contentful and React

After a lot of googling I’m posting here

As I am new user, so the image in this topic is one

When I try to fetch Nested Reference Entry then it says fields undefined typo error. The content is not rich text but the simple short text field

If I remove this line <h2>{menuheadings.fields.about}</h2> then other fields are working fine because heading and nestin2 are not nested reference contents and error is coming from this line

 const view = this.state.section;
        const { heading, testin2, menuheadings} = view;

        return (
            <Fragment>
          <section className = "sidebar">
          <div className = "sidebar__block">
          <div className = "sidebar__contents">
           <h1>{heading}</h1>
           <h3>{testin2}</h3>
         <h2>{menuheadings.fields.about}</h2>
          </div>
          </div>
          </section>
            </Fragment>
        );

JSON response

github code: https://github.com/Alidhuniya/singerProfile-ReactJS-with-Contentful

solved here is the written article: https://dev.to/alidhuniya/how-to-fetch-nested-entry-or-reference-entry-in-contentful-cannot-read-property-fields-of-undefined-24jn