Uncaught Error can’t read property of undefined after video 24

After video 24 when I go to http://localhost:3000/shipping after login I get a blank screen,
in my console in google chrome I’m getting and error below:

Uncaught TypeError: Cannot read properties of undefined (reading ‘fullName’)
at ShippingAddressScreen (ShippingAddressScreen.js:21:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
at recoverFromConcurrentError (react-dom.development.js:25850:1)
at performConcurrentWorkOnRoot (react-dom.development.js:25750:1)
ShippingAddressScreen @ ShippingAddressScreen.js:21
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

here is the code for my ShippingAddressScreen.js:

import React, {
useContext,
useEffect,
useState,
} from ‘react’;
import { Helmet } from ‘react-helmet-async’;
import Form from ‘react-bootstrap/Form’;
import Button from ‘react-bootstrap/Button’;
import { useNavigate } from ‘react-router-dom’;
import { Store } from ‘../Store’;
import CheckoutSteps from ‘../components/CheckoutSteps’;

export default function ShippingAddressScreen() {
const navigate = useNavigate();
const { state, dispatch: ctxDispatch } =
useContext(Store);
const {
userInfo,
cart: { shippingAddress },
} = state;
const [fullName, setFullName] = useState(
shippingAddress.fullName || ”
);
const [address, setAddress] = useState(
shippingAddress.address || ”
);
const [city, setCity] = useState(
shippingAddress.city || ”
);
const [postalCode, setPostalCode] = useState(
shippingAddress.postalCode || ”
);
useEffect(() => {
if (!userInfo) {
navigate(‘/signin?redirect=/shipping’);
}
}, [userInfo, navigate]);
const [country, setCountry] = useState(
shippingAddress?.country || ”
);
const submitHandler = (e) => {
e.preventDefault();
ctxDispatch({
type: ‘SAVE_SHIPPING_ADDRESS’,
payload: {
fullName,
address,
city,
postalCode,
country,
},
});
localStorage.setItem(
‘shippingAddress’,
JSON.stringify({
fullName,
address,
city,
postalCode,
country,
})
);
navigate(‘/payment’);
};
return (
<div>
<Helmet>
<title>Shipping Address</title>
</Helmet>

<CheckoutSteps step1 step2></CheckoutSteps>
<div className=”container small-container”>
<h1 className=”my-3″>Shipping Address</h1>
<Form onSubmit={submitHandler}>
<Form.Group className=”mb-3″ controlId=”fullName”>
<Form.Label>Full Name</Form.Label>
<Form.Control
value={fullName}
onChange={(e) => setFullName(e.target.value)}
required
/>
</Form.Group>
<Form.Group className=”mb-3″ controlId=”address”>
<Form.Label>Address</Form.Label>
<Form.Control
value={address}
onChange={(e) => setAddress(e.target.value)}
required
/>
</Form.Group>
<Form.Group className=”mb-3″ controlId=”city”>
<Form.Label>City</Form.Label>
<Form.Control
value={city}
onChange={(e) => setCity(e.target.value)}
required
/>
</Form.Group>
<Form.Group
className=”mb-3″
controlId=”postalCode”
>
<Form.Label>Postal Code</Form.Label>
<Form.Control
value={postalCode}
onChange={(e) =>
setPostalCode(e.target.value)
}
required
/>
</Form.Group>
<Form.Group className=”mb-3″ controlId=”country”>
<Form.Label>Country</Form.Label>
<Form.Control
value={country}
onChange={(e) => setCountry(e.target.value)}
required
/>
</Form.Group>
<div className=”mb-3″>
<Button variant=”primary” type=”submit”>
Continue
</Button>
</div>
</Form>
</div>
</div>
);
}

Ironically when I I insert a question mark after each shippingAddress.field for e.g. shippingAddress?.fullName || ”,
it works but the fields don’t persist in local storage when I refresh.

How do I correct this??

Thanks

[apcode language=”jscript”]

import React, {
  useContext,
  useEffect,
  useState,
} from 'react';
import { Helmet } from 'react-helmet-async';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import { useNavigate } from 'react-router-dom';
import { Store } from '../Store';
import CheckoutSteps from '../components/CheckoutSteps';
 export default function ShippingAddressScreen() {
  const navigate = useNavigate();
  const { state, dispatch: ctxDispatch } =
    useContext(Store);
  const {
    userInfo,
    cart: { shippingAddress },
  } = state;
  const [fullName, setFullName] = useState(
    shippingAddress.fullName || ''
  );
  const [address, setAddress] = useState(
    shippingAddress.address || ''
  );
  const [city, setCity] = useState(
    shippingAddress.city || ''
  );
  const [postalCode, setPostalCode] = useState(
    shippingAddress.postalCode || ''
  );
  useEffect(() => {
    if (!userInfo) {
      navigate('/signin?redirect=/shipping');
    }
  }, [userInfo, navigate]);
  const [country, setCountry] = useState(
    shippingAddress?.country || ''
  );
  const submitHandler = (e) => {
    e.preventDefault();
    ctxDispatch({
      type: 'SAVE_SHIPPING_ADDRESS',
      payload: {
        fullName,
        address,
        city,
        postalCode,
        country,
      },
    });
    localStorage.setItem(
      'shippingAddress',
      JSON.stringify({
        fullName,
        address,
        city,
        postalCode,
        country,
      })
    );
    navigate('/payment');
  };
  return (
    <div>
      <Helmet>
        <title>Shipping Address</title>
      </Helmet>
       <CheckoutSteps step1 step2></CheckoutSteps>
      <div className="container small-container">
        <h1 className="my-3">Shipping Address</h1>
        <Form onSubmit={submitHandler}>
          <Form.Group className="mb-3" controlId="fullName">
            <Form.Label>Full Name</Form.Label>
            <Form.Control
              value={fullName}
              onChange={(e) => setFullName(e.target.value)}
              required
            />
          </Form.Group>
          <Form.Group className="mb-3" controlId="address">
            <Form.Label>Address</Form.Label>
            <Form.Control
              value={address}
              onChange={(e) => setAddress(e.target.value)}
              required
            />
          </Form.Group>
          <Form.Group className="mb-3" controlId="city">
            <Form.Label>City</Form.Label>
            <Form.Control
              value={city}
              onChange={(e) => setCity(e.target.value)}
              required
            />
          </Form.Group>
          <Form.Group
            className="mb-3"
            controlId="postalCode"
          >
            <Form.Label>Postal Code</Form.Label>
            <Form.Control
              value={postalCode}
              onChange={(e) =>
                setPostalCode(e.target.value)
              }
              required
            />
          </Form.Group>
          <Form.Group className="mb-3" controlId="country">
            <Form.Label>Country</Form.Label>
            <Form.Control
              value={country}
              onChange={(e) => setCountry(e.target.value)}
              required
            />
          </Form.Group>
          <div className="mb-3">
            <Button variant="primary" type="submit">
              Continue
            </Button>
          </div>
        </Form>
      </div>
    </div>
  );
}

[/apcode]