Unable to render PDF using DocumentWrapper component

[minump]

Installed AllenAI pdf-component-library using npm install @allenai/pdf-components . Used the code from Reader component. Unable to render Pdf documents. Errors : Unable to call method(). The context Provider may not be setup correctly.. Screenshot of console log below.

Relevant code snippets below :

package.json:

"dependencies": {
		"@allenai/pdf-components": "^1.0.1",

src/components/Pdf.js:

import React, { useEffect, useRef, useState } from "react";
import {
	DocumentContext,
	DocumentWrapper,
	Overlay,
	PageWrapper,
	RENDER_TYPE,
	ScrollContext,
} from '@allenai/pdf-components';

export default function Pdf(props) {
	const { pageDimensions, numPages } = React.useContext(DocumentContext);
	const { setScrollRoot } = React.useContext(ScrollContext);

	React.useEffect(() => {
		setScrollRoot(null);
	}, []);

	// ref for the div in which the Document component renders
	const pdfContentRef = React.createRef();

	// ref for the scrollable region where the pages are rendered
	const pdfScrollableRef = React.createRef();

	const samplePdfUrl = 'https://arxiv.org/pdf/2112.07873.pdf';

	return (
		<div>
			<div className="reader__container">
				<DocumentWrapper
					className="reader__main"
					file={samplePdfUrl}
					inputRef={pdfContentRef}
					renderType={RENDER_TYPE.SINGLE_CANVAS}>
					<div className="reader__page-list" ref={pdfScrollableRef}>
						{Array.from({ length: numPages }).map((_, i) => (
							<PageWrapper key={i} pageIndex={i} renderType={RENDER_TYPE.SINGLE_CANVAS}>
				
							</PageWrapper>
						))}
					</div>
				</DocumentWrapper>
			</div>
		</div>
	);
}

Any help is appreciated.

[itsrun]

Hi you should wrap this component around ContextProvider when using it (e.g., in App.js)