Can't open another modal in Magnific Pop Up library (Uncaught TypeError: Cannot read properties of null (reading 'type'))

Question

I am trying to have a button, that is already inside a popup modal, to close the current modal and open another modal.

Here is the HTML:

<div class="portfolio_navigation">
         <div class="nav_item prev-project">
               <a class="project" data-mfp-src="#project1-wrapper">
                   <i class="fas fa-arrow-left"></i>
                   <div class="nav_project">
                        <div class="label">Previous Project</div>
                        <h3 class="title">Project 1</h3>
                   </div>
               </a>
        </div>
</div>

Here is the javascript:

        $(".modal-popup").magnificPopup({
            type: "inline",
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: "auto",
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: "popup-mfp",
        });

        $(".project").magnificPopup({
            type: "inline",
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: "auto",
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: "popup-mfp",
        });
        
        $('.project').on('click', function(e) {
            e.preventDefault();
            if ($.magnificPopup.instance && $.magnificPopup.instance.isOpen) {
                $.magnificPopup.close();
            }
            var targetModal = $(this).data('mfp-src');
            if (targetModal && $(targetModal).length > 0) {
                $.magnificPopup.open({
                    items: {
                        src: targetModal
                    },
                    type: 'inline'
                });
            }
        });
    

The modal closes perfectly, and the targetModal variable is fetched correctly, however, the new modal is not opening at all.

With the current code, when I click on the .project, it closes all modals with no error, but if I try to open any modal I get this error:

Uncaught TypeError: Cannot read properties of null (reading 'inline')  magnific-popup.js:200    
     at t.updateItemHTML (magnific-popup.js:200:28)     
     at t.open (magnific-popup.js:67:31)
     at t._openClick (magnific-popup.js:273:19)
     at HTMLButtonElement.d (magnific-popup.js:249:19)
     at HTMLButtonElement.dispatch (jquery.min.js:1924:100)
     at v.handle (jquery.min.js:1856:106)

This breaks the project, as I need it to not just close, but also open another modal popup.

If I remove the

$(".project").magnificPopup({
    type: "inline",
    fixedContentPos: false,
    fixedBgPos: true,
    overflowY: "auto",
    closeBtnInside: true,
    preloader: false,
    midClick: true,
    removalDelay: 300,
    mainClass: "popup-mfp",
});

the first modal closes but I instantly get this error:

Uncaught TypeError: Cannot read properties of null (reading 'type')
     at t._close (magnific-popup.js:173:84)
     at magnific-popup.js:150:19

why is the

$.magnificPopup.open({
items: {
src: '#pomodoro-wrapper'
},
type: 'inline'
});

Not working properly?