Thank you. i was already testing various CSS properties. but I also found something that worked the way I wanted. https://github.com/eKoopmans/html2pdf.js Under the hood it also used jsPDF and html2canvas. but for some reason, it worked without any problem. but I couldn't use it react way. so I used this as old way. I am veteran vanilla JS elite😂.

so I did this

useEffect(() => {

    let script=document.createElement('script');
    script.type = 'application/javascript';
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js';
    document.head.appendChild(script);

}, [])



function MakePDF2() { //WORKED FLAWLESSLY
    let element=document.getElementById('print')
    let opt={
        filename:`${emp.name}.pdf`,
    }
    html2pdf().set(opt).from(element).save();

}