Window getting crashed even after using webworker usePdf

Question

I am using react-pdf for rendering a table using usePdf but due to some reason the whole window is getting crashed every time but as soon as i comment few things it works fine.

const TestTable = ({
  reportSettings,
  testCategory,
  testData,
  showTableHeader = true,
  patientDetails,
  isTestMacData,
  shouldShowColumnLogo = false,
}) => {
  const showFlag = reportSettings?.showLowHighFlag ?? true;
  const showRefRangeFirstThenUnit = reportSettings?.showRefRangeFirstThenUnit;

  const tableDimensions = {
    ...someProperties:size
  };
  const headings = [
    ...headings
  ];

  const TableTextCell = ({ children, ...props }) => {
    ...someCode

    return <Text style={styles}>{children}</Text>;
  };
  return (
    <View>
      {showTableHeader && (
        <TableHeader
          reportSettings={reportSettings}
          tableDimensions={tableDimensions}
          headings={headings}
        />
      )}
      <TableBody
        showFlag={showFlag}
        testCategory={testCategory}
        reportSettings={reportSettings}
        shouldShowColumnLogo={shouldShowColumnLogo}
        isTestMacData={isTestMacData}
        testData={testData}
        patientDetails={patientDetails}
        showRefRangeFirstThenUnit={showRefRangeFirstThenUnit}
        tableDimensions={tableDimensions}
        TableTextCell={TableTextCell}
      />
      <View
        style={{ width: '100%', height: 1, borderBottom: '0.5px solid #000' }}
      />
    </View>
  );
};

ReportComponents.RenderTests = ({
  testItem,
  packages,
  reportSettings,
  testData,
  depIds,
  barCodeImages,
  patientDetails,
  isTestMacData,
}) => {
  const test = testItem?.test;
  const shouldShowColumnLogo = test?.shouldShowColumnLogo;
  const showInterpretation =
    testItem?.interpretation &&
    reportSettings?.showInterpretation &&
    test?.interpretation;
  const showComment = testItem?.comment?.length ? true : false;
  const showSampleType = reportSettings?.showSampleType && test?.sampleType;
  const showDepartmentName =
    reportSettings?.showDeparmentName &&
    !depIds.includes(test?.department?._id);
  if (showDepartmentName) {
    depIds.push(test?.department?._id);
  }
  const showPackageName =
    reportSettings?.showPackageName && testItem?.packageId;
  const showTableHeader =
    test?.testCategory?.[0]?.type == 'textEditor' ? false : true;
  const interpretation =
    showInterpretation &&
    HtmlToPdfRenderer({ htmlString: test?.interpretation });
  return (
    <View
      style={{
        marginBottom: reportSettings?.spacingBetweenTests,
        paddingHorizontal: reportSettings?.reportLeftMargin,
        paddingVertical: 5,
      }}
    >
      <View key={test._id}>
        <View
          style={{
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            position: 'relative',
            justifyContent: 'center',
            marginBottom: reportSettings?.testNameSpacing,
          }}
        >
          {showSampleType && (
            <Text
              style={{
                fontSize: reportSettings?.sampleTypeFontSize,
                position: 'absolute',
                left: 0,
                bottom: 0,
                width: 200,
              }}
            >
              Sample Type: {test?.sampleType}
            </Text>
          )}
          <View
            style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 2,
              alignItems: 'center',
            }}
          >
            {showPackageName && (
              <Text
                style={{
                  fontSize: reportSettings?.departmentFontSize,
                  fontWeight: '800',
                  textTransform: 'uppercase',
                }}
              >
                {packages?.find((e) => e.id == testItem.packageId)?.name}
              </Text>
            )}
            {showDepartmentName && (
              <Text
                style={{
                  fontSize: reportSettings?.departmentFontSize,
                  fontWeight: '800',
                  textTransform: 'uppercase',
                }}
              >
                {test?.department?.name}
              </Text>
            )}
            <Text
              style={{
                fontSize: reportSettings?.testNameFontSize,
                fontWeight: '800',
                textTransform: 'uppercase',
              }}
            >
              {test.name}
            </Text>
          </View>
          {reportSettings?.showBarcode && barCodeImages[testItem._id] && (
            <Image
              style={{
                width: 85,
                height: 25,
                right: 0,
                bottom: 0,
                position: 'absolute',
              }}
              src={barCodeImages[testItem._id]}
            />
          )}
        </View>
        <TestTable
          testCategory={test?.testCategory}
          reportSettings={reportSettings}
          testData={testData}
          showTableHeader={showTableHeader}
          patientDetails={patientDetails}
          isTestMacData={isTestMacData}
          shouldShowColumnLogo={shouldShowColumnLogo}
        />
      </View>
      {showComment && (
        <View style={{ marginTop: 10 }}>
          <Text
            style={{
              fontSize: reportSettings?.noteHeadingFontSize,
              marginBottom: 5,
            }}
          >
            Comments:{' '}
          </Text>
          {testItem?.comment?.map((comment, index) => (
            <View
              key={index}
              style={{
                fontSize: reportSettings?.noteContentFontSize,
                flexDirection: 'row',
                marginBottom: 2,
              }}
            >
              <Text style={{ marginRight: 5 }}>•</Text>
              <Text>{comment}</Text>
            </View>
          ))}
        </View>
      )}
      <View
        style={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          width: '100%',
        }}
      >
        {testData?.map((item, idx) => {
          if (item.testId == test?._id && item.isGraph) {
            return (
              <Image
                source={{
                  uri: item.value,
                  method: 'GET',
                  headers: { 'Cache-Control': 'no-cache' },
                }}
                style={{ width: '100px', height: 'auto' }}
                key={idx}
              />
            );
          }
        })}
      </View>
      {showInterpretation && (
        <View style={{ marginTop: 10 }}>
          <Text
            style={{
              fontSize: reportSettings?.interpretationHeadingFontSize,
              marginBottom: 5,
            }}
          >
            Interpretation:
          </Text>
          {interpretation}
        </View>
      )}
    </View>
  );
};

And I render this RenderTests into document and page nesting.

I have also tried directly rendering without using the web worker but its still hanging.