Why is react pdf viewer being displayed in a part of my page?

Question

I am using react-pdf-renderer to display a pdf viewer in the dom. But I got a problem of the pdf being displayed in an unexpected way.

this is where im using pdf viewer

type Props = {
  bri: IBri|null;
};
export default function BRIDetails({ bri }: Props) {
  if (!bri) {
    return null;
  } 
  return (
    <>
      <BRIToolbar bri={bri} />
      <PDFViewer>
        <BriPDF bri={bri} />
      </PDFViewer>
    </>
  );
}

and this is the component of the view page

export default function BRIDetailsPage() {
  const { themeStretch } = useSettingsContext();
  const dispatch = useDispatch();
  const { id } = useParams();
  const { getBriByIdStatus, getBriByIdRes } = useSelector((state) => state.bri);
  useEffect(() => {
    if (id) dispatch(getBriById(id));
  }, [dispatch, id]);
  return (
    <>
      <Helmet>
        <title> BRI: View | Minimal UI</title>
      </Helmet>
      <Container>
        <CustomBreadcrumbs
          heading="View BRI"
          links={[
            {
              name: 'reintegration_vouchers_list',
              href: PATH_DASHBOARD.bri.list,
            },
            { name: 'View BRI' },
          ]}
        />
        {['idle', 'loading'].includes(getBriByIdStatus) ? (
          <LoadingScreen />
        ) : (
          <BRIDetails bri={getBriByIdRes} />
        )}
      </Container>
    </>
  );
}