Custom preview_post_link not working for draft post

I am trying to change the functionality of the preview button so the URL can be changed to the address I want. I am using the code below

function preview_link_fix( $preview_link ){

    $mydomain = 'http://localhost:3001/preview';
    $post = get_post( get_the_ID() );

    $args = array(
        'post'    => $post,
        'preview' => 'true'
    );
    return add_query_arg( $args, $mydomain );
}

This basically takes the preview to my react front end page. This is working fine for the custom post types and the post only in the case if they are published and the posts which are in the draft the button is not working but the preview option which is below the post in the post-list is working.

So the preview option which is shown in the image is working but for the preview button inside the edit, post page is not working. Please anybody can help me with which this problem.

I encountered the same issue and after some research, I came across the following solution.

For context, there is a bug on gutenberg and there is no platform specific way to change the preview link yet.

Add the following code to your functions.php:

// Workaround script until there's an official solution for https://github.com/WordPress/gutenberg/issues/13998
function fix_preview_link_on_draft() {
    echo '<script type="text/javascript">
        jQuery(document).ready(function () {
            const checkPreviewInterval = setInterval(checkPreview, 1000);
            function checkPreview() {
                const editorPreviewButton = jQuery(".editor-post-preview");
                const editorPostSaveDraft = jQuery(".editor-post-save-draft");
                if (editorPostSaveDraft.length && editorPreviewButton.length && editorPreviewButton.attr("href") !== "' . get_preview_post_link() . '" ) {
                    editorPreviewButton.attr("href", "' . get_preview_post_link() . '");
                    editorPreviewButton.off();
                    editorPreviewButton.click(false);
                    editorPreviewButton.on("click", function() {
                        editorPostSaveDraft.click();
                        setTimeout(function() { 
                            const win = window.open("' . get_preview_post_link() . '", "_blank");
                            if (win) {
                                win.focus();
                            }
                        }, 1000);
                    });
                }
            }
        });
    </script>';
}

add_action('admin_footer', 'fix_preview_link_on_draft');

Link to solution: https://github.com/WordPress/gutenberg/issues/13998#issuecomment-568698680

All credit to the contributor – Tvanro