React pdf generate with jsPdf and html-to-image not working properly

Question

const inputRef = useRef<HTMLDivElement>(null);
    const printDocument = () => {
        const componentWidth = Number(inputRef.current?.offsetWidth);
        const componentHeight = Number(inputRef.current?.offsetHeight);
        const orientation = Number(componentWidth) >= Number(componentHeight) ? 'l' : 'p';

        htmlToImage.toPng(inputRef.current as HTMLDivElement).then((imgData) => {
            const pdf = new jsPDF({
                orientation,
                unit: 'px'
              });
        pdf.internal.pageSize.width = componentWidth;
        pdf.internal.pageSize.height = componentHeight;
        pdf.addImage(imgData, 'PNG', 0, 0,componentWidth, componentHeight);
        pdf.save("skills.pdf");
      });
    };

<div ref={inputRef} style={{width: "3000px !important",height: "3000px !important"}} > {selectedView.value ? <View1/> : <View2/>} </div>

This is the generated pdf, as you can see some lines are distorted but some are fine