Как распечатать React компонент с картой react-leaflet?

Aetae, Хорошо, попробую первый вариант

Получаю необходимый для распечатывания элемент

useEffect(() => {
        if (mark && isOpen) {
            const printContent = document.querySelector('.popup_content');
            if (printContent) {
                const printDiv = printContent.cloneNode(true) as HTMLElement;
                printDiv.style.display = 'block';
                document.body.appendChild(printDiv);
                window.print();
                document.body.removeChild(printDiv);
            }
        }
    }, [mark, isOpen]);

Приписываю ему необходимые мне стили:

.popup_content {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 202;
    position: relative;
    width: calc(100% - 208px); /* 104px с каждой стороны */
    height: 90vh;
    background: white;
    padding: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 25px;
}

@media print {
    .popup_content {
        display: flex;
        flex-direction: column;
        row-gap: 30px;
        box-sizing: border-box;
        overflow: hidden;
        z-index: 202;
        position: relative;
        width: 100%; 
        height: 600px;
        background: red;
        padding: 50px;
    }
}

Да, карта видна, но во первых не полностью, во вторых стили из media print почему-то не применяются