Cannot destructure property …. as undefined

I have the following page :

import React, { useState } from "react";
import { Card, Form, Button } from "react-bootstrap";
import {  Link } from "react-router-dom";
import FormContainer from '../components/FormContainer';
import Message from '../components/Message'
import Loader from '../components/Loader/Loader'
import {useDispatch,useSelector} from 'react-redux'
import { sentEmail } from "../actions/userActions";



const EmailPasswordReset = () => {
 
 
  //Create a page for send an email to reset password of the Customer
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);
 
  // set up a variable to define if the email is sent or not
  const sentEmailStatus = useSelector(state => state.sentEmail);
  const { loading: loadingStatus, error: errorStatus, message: messageStatus } = sentEmailStatus;
  


  const dispatch = useDispatch();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    dispatch(sentEmail(email));
  }

  const handleChange = (e) => {
    setEmail(e.target.value);
  }

 

 
  return (
    <FormContainer> 
      <h1>Request Email</h1>
      <Card>
        <Card.Body>
          <Form onSubmit={handleSubmit}>
            <Form.Group controlId="formBasicEmail">
              <Form.Label>Email address</Form.Label>
                <Form.Control
                  type="email"
                  placeholder="Enter email"
                  value={email}
                  onChange={handleChange}
                />
                </Form.Group>
                <Link to='/login'>
                      Login
                </Link>
                <Button variant="primary" type="submit" disabled={loading}>
                  {loading ? 'Loading...' : 'Submit'}
                </Button>
          </Form>
        </Card.Body>
      </Card>
      {message && (
        <Message dismissible duration={8} variant='warning'>
          {message}
        </Message>
      )}
      {errorStatus && (
        <Message dismissible variant='danger'>
          {errorStatus}
        </Message>
      )}
      {messageStatus && (
        <Message dismissible variant='success' duration={8}>  
          {messageStatus}
        </Message>
      )}
      {loading && (
        <Loader />
      )}
    </FormContainer>
  );
}

export default EmailPasswordReset;

but the page explodes and in the console I have these errors:

Uncaught TypeError: Cannot destructure property 'loading' of 'sentEmailStatus' as it is undefined.
    at EmailPasswordReset (bundle.js:4657:14)
    at renderWithHooks (bundle.js:77051:22)
    at mountIndeterminateComponent (bundle.js:79813:17)
    at beginWork (bundle.js:81012:20)
    at HTMLUnknownElement.callCallback (bundle.js:66001:18)
    at Object.invokeGuardedCallbackDev (bundle.js:66050:20)
    at invokeGuardedCallback (bundle.js:66110:35)
    at beginWork$1 (bundle.js:85852:11)
    at performUnitOfWork (bundle.js:84688:16)
    at workLoopSync (bundle.js:84625:9)
react-dom.development.js:20085 The above error occurred in the <EmailPasswordReset> component:

    at EmailPasswordReset (http://localhost:3000/static/js/bundle.js:4651:76)
    at Routes (http://localhost:3000/static/js/bundle.js:119425:5)
    at div
    at http://localhost:3000/static/js/bundle.js:57767:5
    at main
    at Router (http://localhost:3000/static/js/bundle.js:119358:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:118838:5)
    at App
    at Provider (http://localhost:3000/static/js/bundle.js:116036:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
bootstrap:27 Uncaught TypeError: Cannot destructure property 'loading' of 'sentEmailStatus' as it is undefined.
    at EmailPasswordReset (bundle.js:4657:14)
    at renderWithHooks (bundle.js:77051:22)
    at mountIndeterminateComponent (bundle.js:79813:17)
    at beginWork (bundle.js:81012:20)
    at HTMLUnknownElement.callCallback (bundle.js:66001:18)
    at Object.invokeGuardedCallbackDev (bundle.js:66050:20)
    at invokeGuardedCallback (bundle.js:66110:35)
    at beginWork$1 (bundle.js:85852:11)
    at performUnitOfWork (bundle.js:84688:16)
    at workLoopSync (bundle.js:84625:9)

How can I solve this problem, be able to view the form to enter the email;

The page is blank and these are the errors:

I have an other problem, when I click on link in the email and reset the password it return User not found.

>Solution :

It is probably because the value of sentEmailStatus it’s undefined when the component renders, during the first rendering.

If you want avoid this behaviour, you can change your destructuring:

  const { loading: loadingStatus, error: errorStatus, message: messageStatus } = sentEmailStatus || {};

This is called Short-circuit evaluation. You can check it there Short-circuit evaluation