Add dynamic contents(add new page if contents are huge), circle not printing.

Hi @Igor-Vladyka, thanks for such a great plugin for printing leaflet map including bunch of features. I am trying to print the map(can be printed easily) with adding pushpins from the external API on the map based on selected radius. So I've set a component when my external API's data is ready like this:

{ radiusSearchInstitute.length > 0 && <RadiusInstitutes data={ radiusSearchInstitute } /> }

Here, RadiusInstitutes is a component shown based on API's data.

import React, { useMemo, useEffect, useState } from "react";
import * as turf from "@turf/turf";
import { useDispatch, useSelector } from "react-redux";

const RadiusInstitutes = ({ data }) => {
  var arr = data.map((obj) => ({
    name: obj.properties.name,
    eiin: obj.properties.eiin,
    y: obj.properties.y,
    x: obj.properties.x,
    distance: turf
      .distance(
        turf.point([circleCenter.lng, circleCenter.lat]),
        turf.point([obj.properties.x, obj.properties.y]),
        { units: "kilometers" }
      )
      .toFixed(2),
  }));

  // get table column
  const column = Object.keys(arr[0]);
  // get table heading data
  const ThData = () => {
    return column.map((data) => {
        // console.log("ThData");
        // console.log(data);
      return <th key={data}>{data}</th>;
    });
  };
  // get table row data
  const tdData = () => {
    return arr.map((data) => {
      return (
        <tr>
          {column.map((v, idx) => {
            return <td key={idx}>{data[v]}</td>;
          })}
        </tr>
      );
    });
  };

  return (
    <div style={{ textAlign: "center", marginTop: "200px" }}>
      <table className="sub-content" leaflet-browser-print-content="true">
        <thead>
          <tr>{ThData()}</tr>
        </thead>
        <tbody>{tdData()}</tbody>
      </table>
    </div>
  );
};

export default RadiusInstitutes;

I need to add these data append under the map. I've followed this doc. But when I did this, my actual map is being overlapped by my content like this(after printing):

Also, red circle is not being printed. Before printing, the map is like this:

Screenshot from 2022-05-23 10-49-29 .

I've implemented 10-12 ways(other printing plugin) so far. Is there any way so that I can solve this problem by using this plugin? Thanks in advance.

Igor-Vladyka / leaflet.browser.print

Add dynamic contents(add new page if contents are huge), circle not printing. #117