Chess.js loads custom fen but falls back to default fen on moving through pgn that causes game break

Sorry this might be a very nooby question.

I am building a chess pgn database for someone and I am stuck at the finish line.

I have everything working (when a standard chess Forsyth–Edwards Notation (FEN) is loaded in)

Whenever I load a custom fen from the database, it loads the fen fine, but when you press on next btn it falls back to the default fen.

Please tell me what I can do to resolve this issue.

ChatGPT does not know either

window.loadPGN = function(id) {
  $.getJSON('php/get_pgn.php?id=' + id, function(data) {
    if (data.success) {
      const startingFen = data.starting_fen || 'start';

      // Initialize the chessboard with the starting FEN
      board = ChessBoard('annotation-board', {
        pieceTheme: cfg.pieceTheme,
        position: startingFen,
      });

      // Initialize the Chess.js game object with the starting FEN
      game = new Chess(startingFen);

      // Load the PGN into the Chess.js game instance
      game.load_pgn(data.pgn_data);

      // Display PGN and metadata
      $('#move-window').html(data.pgn_data);

      let metadata =
        `<strong>Tournament:</strong> ${data.tournament || "N/A"}<br>
                            <strong>Time Control:</strong> ${data.time_control || "N/A"}<br>
                            <strong>Variant:</strong> ${data.variant || "N/A"}<br>
                            <strong>White:</strong> ${data.white_player || "N/A"} (${data.white_elo || "N/A"})<br>
                            <strong>Black:</strong> ${data.black_player || "N/A"} (${data.black_elo || "N/A"})<br>
                            <strong>Result:</strong> ${data.result || "N/A"}<br>
                            <strong>Termination:</strong> ${data.termination || "N/A"}<br>
                            <strong>Date:</strong> ${data.date || "N/A"}<br>
                            <strong>Starting FEN:</strong> ${startingFen}`;
      $('#annotation-window').html(metadata);

      // Reset move history and controls
      moves = game.history({
        verbose: true
      });
      currentMoveIndex = 0;

      $('#nextBtn').on('click', function() {
        if (currentMoveIndex < moves.length) {
          const move = moves[currentMoveIndex]; // Get the next move
          game.move(move); // Apply the move to the game
          board.position(game.fen()); // Update the board with the new position
          currentMoveIndex++;
        } else {
          console.log("No more moves.");
        }
      });

      $('#prevBtn').on('click', function() {
        if (currentMoveIndex > 0) {
          game.undo(); // Undo the last move
          board.position(game.fen()); // Update the board with the new position
          currentMoveIndex--;
        } else {
          console.log("Already at the first move.");
        }
      });

      $('#startPositionBtn').on('click', function() {
        game.reset(); // Reset the game to its initial state
        game.load(startingFen); // Reload the game with the starting FEN
        board.position(startingFen); // Set the board to the starting FEN
        currentMoveIndex = 0;
      });

      $('#endPositionBtn').on('click', function() {
        while (currentMoveIndex < moves.length) {
          const move = moves[currentMoveIndex];
          game.move(move); // Apply the move
          currentMoveIndex++;
        }
        board.position(game.fen()); // Update the board to the final position
      });
    } else {
      console.error("Failed to fetch PGN:", data.message);
    }
  });
};

I have tried so many different things.

The last thing I tried was to inject the custom fen into the chess.js

var DEFAULT_POSITION = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';

// Allow injection of a custom FEN for game initialization
window.setCustomFEN = function(fen) {
  DEFAULT_POSITION = fen;
};

and update the load in the index.html

window.loadPGN = function(id) {
  $.getJSON('php/get_pgn.php?id=' + id, function(data) {
    if (data.success) {
      setCustomFEN(data.starting_fen); // ✅ Injecting the custom FEN
      game = new Chess(DEFAULT_POSITION); // ✅ Using the overridden FEN
      board.position(DEFAULT_POSITION);
      game.load_pgn(data.pgn_data);
      moves = game.history({
        verbose: true
      });
      currentMoveIndex = 0;
      $('#move-window').html(data.pgn_data);
    }
  });
};