How to open the WordPress Media Library popup in next js app?

Question

    // If the media frame already exists, reopen it.
    if (file_frame) {
        file_frame.open();
        return;
    }
 
    // Create the media frame.
    file_frame = wp.media.frames.downloadable_file = wp.media({
        title: 'Choose file',
        button: {
            text: 'Use file'
        },
        multiple: false
    });
 
    // When an image is selected, run a callback.
    file_frame.on('select', function () {
        var attachment = file_frame.state().get('selection').first().toJSON();
        console.log(attachment);
    });
 
    // Finally, open the modal.
    file_frame.open();

After doing some RnD, I have found this in the web. But it does not work inside nextjs/react app. It works with JQuery perfectly fine if I place this outside of the nextjs app. if you are wondering which popup I am talking about, take a look at this image- Wordpress Media Library Popup

I want to show the mentioned popup inside my nextjs app and handle upload image in here.