Page header and content is overlaping while printing in react. using react to print

Question

I want to print a page, that overlaps page header with page content, also Page number not working. i am using react-to-print. And below css for styling

I want to print a page with page number without any overlapping and proper page breaking.

Here this code prints the data from array of objects and prints in table format and print button prints the table in multiple pages with header and footer

import React, { useContext, useRef, useEffect, useState } from 'react'
import Table from 'react-bootstrap/Table';
import Button from 'react-bootstrap/Button';
import ReactToPrint, { useReactToPrint } from 'react-to-print';
import Header from './Header'
import Footer from './Footer'
import Image from '../images/logo192.png'


export default function Home() {

    const print_details = [
        {
            _id: 1,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 2,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 3,
            description: " Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 4,
            description: " Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 5,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 6,
            description: " Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 7,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 8,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 9,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 10,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 11,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 12,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 13,
            description: " Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. ",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 14,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 15,
            description: " Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 16,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 17,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 18,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 19,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
        {
            _id: 20,
            description: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis hic modi necessitatibus, tempore, eligendi ea nihil facere quam eum placeat nisi suscipit maxime. Animi incidunt, inventore deleniti rerum exercitationem dicta.",
            date: "2023/02/02",
            price: 20000,
            gst: "18%",

        },
    ];


    const ref = useRef(null);
    const componentHeaderRef = useRef();

   
    const printvariable = useReactToPrint({
        content: () => ref.current,
        documentTitle: "this is the document Title",
        
    });

    

    const Printvalues = () => {
        // var totalPages = Math.ceil(ref.current.scrollHeight);
        // console.log(totalPages)
        setTimeout(() => {
            printvariable();
        }, 500);
    }

    let array = [];
    


    return (

        <>
            <center>
                
                <Button style={{ marginTop: "50px" }} variant="primary" onClick={Printvalues}>Print</Button>



                <div className="start" ref={ref}>

                    <div className="Header"><Header /></div>


                    <Table className="content" border={1} striped style={{ width: "80%", marginTop: "60px" }}>


                        <thead className="thead" style={{ marginTop: "50px" }}>
                            <tr>
                                <th>Id</th>
                                <th>Description</th>
                                <th>Date</th>
                                <th>Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            {print_details.map((item, index) => {
                                return (
                                    <tr className="tr_content" key={index}>
                                        <td>{item._id}</td>
                                        <td>{item.description}</td>
                                        <td>{item.date}</td>
                                        <td>{item.price}</td>
                                    </tr>
                                )
                            })}


                        </tbody>

                    </Table>
                    <div className='Footer' ><Footer /></div>

                    <div className='pagenumber' id='pagenumber'>
                    </div>
                </div>

            </center>
        </>
    )
}

body {
    counter-reset: page;
}

@page {
    counter-increment: page;
    counter-reset: page 1;
}

@media print {
    .Footer {
        position: fixed;
        bottom: 0;
        margin-top: 20px;
    }

    .Header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 9999;
        margin-bottom: 100px;
        padding-top: 130;
    }

    table {
        page-break-inside: avoid;
        margin-top: 100px;
    }

    thead {
        position: relative;
        width: 100%;
        background-color: red;
        margin-top: 30px;
    }

    tr {
        page-break-inside: avoid;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>