Требуется реализовать React‑компонент, который делает два действия: 1️⃣ Показывает текущее значение вертикального скролла окна (window.scrollY). 2️⃣ После монтирования компонента получает случайное число асинхронно и выводит его. Нужно проанализировать существующую реализацию, выявить и объяснить как можно больше ошибок, а затем исправить их.

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

// Имитация запроса к серверу – возвращаем число асинхронно
const fetchRandomNumber = () => Promise.resolve(Math.random());

const NumberAndScroll = () => {
    const [randNum, setRandNum] = useState();
    const [yPos, setYPos] = useState();

    useEffect(() => {
        // получаем число и сохраняем в стейт
        fetchRandomNumber().then(setRandNum);
        // обработчик скролла
        const onScroll = () => setYPos(window.scrollY);
        window.addEventListener('scroll', onScroll);
        // очистка при размонтировании
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    return (
        <div>
            <div>Number: {randNum}</div>
            <div>Scroll: {yPos}</div>
        </div>
    );
};

В описании следует указать, какие проблемы были найдены (неправильный async‑useEffect, отсутствие массива зависимостей, утечка обработчика, опечатка в имени события, отсутствие начальных значений стейтов и т.д.) и как они исправлены.

Корректировать работу компонента: отображение скролла и асинхронного числа