Как сделать HTMLFlipBook адаптивным?

Question

[Виктор]

Задача: Мне необходимо реализовать читалку, которая будет отображать pdf в виде перелистывающийся книги.

Я использовал для этого две библиотеки, это react-pdf и react-pageflip.
Сначала вроде всё заработало, когда использовались pdf размера А4, но когда начал подгружать pdf других форматов, всё начало отображаться криво. Страницы наезжают друг на друга. А если включаю autoSize={true} и size="stretch" , то получаю страницы, которые разъезжаются из-за из-за неправильной ширины страницы, и никак её не могу задать.

Как заставить react-pdf быть адаптивным и нормально перелистывать любые форматы pdf?

Мой код:

<Document
	className={isFull ? 'is-full' : 'default'}
	renderMode={'canvas'}
	onLoadSuccess={({ numPages }) => {
		onDocumentLoadSuccess(numPages)
		}}
	onLoadError={e => setLoadStatus(false)}
	file={server_url ? `${server_url}${book?.file}` : book?.file}
>
	<HTMLFlipBook
		onFlip={onFlip}
		width={400}
		height={700}
		showCover={true}
		ref={bookRef}
		renderOnlyPageLengthChange={false}
		autoSize={true}
		size="stretch"
	>
		{pages?.map((page: number) => (
			<div className='test' key={page}>
				<Page  scale={1.0}  />
			</div>
		))}
	</HTMLFlipBookAny>
</Document>