Динамическое скрытие элементов

У меня есть объект со 100 элементами и блок с высотой 300px я использую библиотеку react-table она выводит их сразу и получаеться так что некоторые элементы уходят вниз этого блока (типо 10 вывелось , а 11 наполовину) я сделал функцию которая скрывает элементы которые выводяться на половину, но приперезагрузке элемент выведенный на половину показываеться на 1 секунду, как сделать что бы этого не было и обекты сразу в нужно порядке выводились? вот код

const TableBlock = <T extends DefaultRecordType>({ info = [], columns = [] }: Props<T>) => {
    const heightRef = useRef(null);

    useEffect(() => {
        const handleDisplay = () => {
            handleRowDisplay(heightRef, blockTopHeight);
        };

        window.addEventListener('resize', handleDisplay);
        handleDisplay();

        return () => {
            window.removeEventListener('resize', handleDisplay);
        };
    }, []);

    if (info.length === 0) {
        return <p className={style.textNotNews}>Сегодня данных нет</p>;
    }

    return (
        <Table
            components={{
                table: (props: Props<T>) => <table ref={heightRef} {...props} className={style.tableBlock} />,
                body: {
                    cell: (props: Props<T>) => <td {...props} className={style.tableCell} />
                }
            }}
            columns={columns}
            data={info}
            rowKey={(record) => record.id}
            className={style.tableBlock}
        />
    );
};