Rendering issue with large number of Text components when using useState

[only-issues]

bandicam.2025-01-20.14-04-27-912.mp4

When rendering a large number of Text components (around 50) with dynamic state updates using useState, the terminal output behaves incorrectly. Instead of updating the existing content, it appends new content below, creating duplicate output.

Steps to Reproduce

1. Create a component with multiple Text elements using Array.map (e.g., 50 items)
2. Implement state update using useInput
3. Run the application and try to update the state by pressing any key

Code Example

import {Box, render, Text, useInput} from "ink";
import {useState} from "react";

export default function Test() {
    const [tab, setTab] = useState('Q');
    useInput((input) => {
        setTab(input);
    })
    return (
        <Box flexDirection={'column'}>
            <Box flexDirection={'column'}>
                {Array(50).fill(null).map((_, index) => (
                    <Text key={`${index}`}>
                        Tab: {tab}, Index: {index}
                    </Text>
                ))}
            </Box>
            <Text>Footer Text</Text>
        </Box>
    );
}
render(<Test />);

Expected Behavior

When the state updates (by pressing a key), the terminal should update the existing content in place, replacing old values with new ones.

Actual Behavior

• With small number of items (~5): Works correctly, updates content in place
• With large number of items (~50): Instead of updating in place, it appends the new content below the existing output, creating duplicate content in the terminal

Example Output with 50 items

Initial output:

Tab: Q, Index: 0
Tab: Q, Index: 1
...
Tab: Q, Index: 49

After pressing 'h' key (incorrect behavior):

Tab: Q, Index: 0
Tab: Q, Index: 1
...
Tab: Q, Index: 49
Tab: h, Index: 0
Tab: h, Index: 1
...
Tab: h, Index: 49

Environment

• Node.js version: 22.13.0
• Ink version: 5.1.0
• Operating System: Windows