react-native Destructuring props [duplicate]

Why do I get an undefined error or null error when I set a default value when destructuring props? I saw on MDN that I can set default values ​​when doing destructuring. When the value is null, it cannot be referenced, so I put the default value as an empty array, but I don't know why the error occurs. Shouldn't a default value be set when referencing a property to be null? I would really appreciate it if you could let me know what I did wrong.

//This is the props dummy data value.
displayOptions = {
 isVisible: true,
 displayImages : null,
 setting:{...some data}
 ....
}

class DisplayScreen extends React.Component {
  render() {
    const {displayImages = []} = this.props.displayOptions ;  
     <React.Fragment>
            {!this.state.isShowMenu && displayImages.length > 0 && (
              <React.Fragment>
                <S3Image
                  imgKey={displayImages[0].key}
                  level={displayImages[0].level}
                />
                ....
              </React.Fragment>
            )}
           ......
     </React.Fragment>


  }
}

The error may due to displayImages haven't property length since its value is null. Only undefined will take default value. Like below

displayOptions = {
 isVisible: true,
 displayImages : undefined,
 setting:{...some data}
 ....
}

reference from duplication issue destructuring assignment default value