React js Check array or object is undefined

<!DOCTYPE html>
<html>

</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState } = React
        function App() {
            const [output, setOutput] = useState('');
            const [modifiedObject, setModifiedObject] = useState('');
            const [userGreeting, setUserGreeting] = useState('');

function handleUndefinedObject() {
                // Define myObject variable
                let myObject

// Check if myObject is undefined
                if (typeof myObject === 'undefined') {
                    // Object is undefined
                    setOutput('Object is undefined');

// Create a new object
                    myObject = {
                        name: 'John',
                        age: 25,
                        city: 'New York',
                    };

// Access and modify properties of the object
                    myObject.age += 1;
                    myObject.city = 'San Francisco';

// Perform some operations with the object
                    setModifiedObject(`Modified object: ${JSON.stringify(myObject)}`);

// Call a function using the object
                    greetUser(myObject);
                }
            }

// Function to greet the user using the object
            function greetUser(user) {
                const greeting = `Hello, ${user.name}!\n`;
                const age = `You are ${user.age} years old.\n`;
                const city = `You live in ${user.city}.`;
                setUserGreeting(`${greeting}${age}${city}`);
            }

return (
                <div>
                    <h1>React Js Check Undefined is Object</h1>
                    <button onClick={handleUndefinedObject}>Handle Undefined Object</button>
                    <p>{output}</p>
                    <p>{modifiedObject}</p>
                    <p>{userGreeting}</p>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
        * {
            box-sizing: border-box;
        }

body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

.container {
            text-align: center;
            padding: 20px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            margin: 0 auto;
            width: 600px;
            margin: 0 auto
        }
    </style>
</body>

</html>