Get error "extract_area: bad extract area" when second extract call in toBuffer()

[flyforme2016]

Sharp Version: 0.32.1

Description:
My goal is to extract frames from an animated WebP file. However, a 'bad extract area' error occurs when calling toBuffer() in the second loop.

Sample image
https://cafe24img.poxo.com/benitomaster/web/product/small/202404/e45078df2e402a9b4a9e48bfc08b0b0e.webp

async function decodeAwebp(buffer) {
    const webpImage = sharp(buffer, { animated: true, pages: -1 });
    const metadata = await webpImage.metadata();
    const { pages, width, height, pageHeight, delay } = metadata;

    if (!pages || pages < 2) {
        throw new Error('This WebP image is not animated.');
    }
    const frames = [];

    for (let i = 0; i < pages; i++) {
        const frame = image
            .extract({ left: 0, top: pageHeight * i, width, height: pageHeight }) 
            .ensureAlpha()
            .raw()
            .toBuffer();
        frames.push(frame);
    }

    return {
        width,
        pageHeight,
        delay,
        frames
    };
}

Problem:
The code runs without issue for the first frame, but when it reaches the second loop, I encounter a bad extract area error during the toBuffer() call.

Is there an issue with my code, or is this a potential bug in the Sharp library? Any guidance or assistance would be greatly appreciated.

[lovell]

The page constructor parameter allows you to select a specific frame/page, no need to roll you own logic.

-        const frame = image
-            .extract({ left: 0, top: pageHeight * i, width, height: pageHeight }) 
+        const frame = await sharp(buffer, { animated: true, page: i })

[lovell]

I hope this information helped. Please feel free to re-open with more details if further assistance is required.