Detect and fix defects in a React component

In this task, you need to analyze the provided React component fragment and fix all identified errors so that the component correctly loads and displays user data.

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    const [error, setError] = useState(false);

    useEffect(() => {
        async function fetchUser() {
            try {
                const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
                if (!response.ok) {
                    throw new Error('Error fetching user');
                }
                const data = await response.json();
                setUser(data);
            } catch (err) {
                setError(true);
            }
        }

        fetchUser();
    }, [userId]);

    useEffect(() => {
        return () => {
            setUser(null);
        };
    }, []);

    return (
        <div>
            <h1>User Profile</h1>
            {error && <p>Error loading user data.</p>}
            {user && (
                <div>
                    <p>Name: {user.name}</p>
                    <p>Email: {user.email}</p>
                </div>
            )}
        </div>
    );
}

export default UserProfile;