Detect and fix defects in a React component

In the provided React component fragment, it is necessary to identify and fix syntax and logical errors related to the use of hooks, event handling, and JSX markup.

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

// Simulate a server request that returns a random number
const getRandom = () => Promise.resolve(Math.random());

const NumberAndScroll = () => {
    const [rand, setRand] = useState();
    const [offset, setOffset] = useState();

    useEffect(() => {
        const fetchData = async () => {
            setRand(await getRandom());
        };
        fetchData();
    }, []);

    useEffect(() => {
        const handleScroll = () => setOffset(window.scrollY);
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        <div>
            <div> Number: {rand} </div>
            <div> Scroll: {offset} </div>
        </div>
    );
};