I have a problem, I need to separate the content if it exceeds 980 pixels . But I can’t do it.Here is an example of an array of objects with pages , as well as the display code
[
{
“id”: 1,
“title”: “Documents”,
“text”: “

Things to do after

”
}
]

the text may also contain images in base 64 format

const ComponentToPrint = React.forwardRef(({ item, index, pages, }, ref) => {

return (
    <div ref={ref} className='mt-[32px] w-[795px] print-page'>
        <div className='bg-white h-[980px] px-[40px] relative py-[8px]'>
            <div className="print-content mb-[54px]">
                {parse(item.text)}
            </div>
            <div className='bottom-[14px] right-[32px] left-[32px]'>
                <div className='bg-[#33333380] h-[1px]'> </div>
                <span className='flex justify-center text-[#6F6E6E] font-hebrew text-[10px] font-[600] mt-[12px] pb-[16px]'>{index + 2}/{pages.length + 2}</span>
            </div>
        </div>
    </div>
);

});

{pages.map((item, index) => (
<ComponentToPrint ref={(el) => (componentRef.current[index] = el)} pages={pages} index={index} item={item} />
))}

I will be grateful for any help

I tried to divide the pages by the number of characters, but it did not work because I have a text editor and the text can be larger in size, more indents or images and it does not work