unexpected character at line 1 column 1 of the JSON data error

It is showing that error when i want to run the fetch-edit.php file in the localhost. It is getting the values from the table and converting it into arrays. but i dont get where could be the problem.

this is fetch-edit.php file code

<?php
include 'config.php';

// Get the record ID from the query parameter
$id = $_GET['id'];

// Use prepared statement to fetch the data based on the ID
$stmt = mysqli_prepare($conn, "SELECT id, Alias, Gruppe, Passwort, Beschreibung FROM teamviews_customers WHERE cid = ?");
mysqli_stmt_bind_param($stmt, "i", $id);
mysqli_stmt_execute($stmt);
mysqli_stmt_bind_result($stmt, $id, $alias, $group, $pass, $text);
// Fetch the data into an associative array
$data = array();
while (mysqli_stmt_fetch($stmt)) {
    $data = array(
        'id' => $id,
        'alias' => $alias,
        'group' => $group,
        'pass' => $pass,
        'text' => $text
    );
}

mysqli_stmt_close($stmt);
mysqli_close($conn);

// Return the data as JSON
header('Content-Type: application/json');
echo json_encode($data);
?>

and this is the fetch-data.js file code

function editRecord(id) {
    console.log(id);
    let modal_heading = document.getElementById("modal-h4");
    modal_heading.innerHTML = "";
    document.getElementById("myModal").style.display = "block";
    modal_heading.innerHTML = "User Login";
    // if (confirm("Are you sure you want to Edit the record?")) {
    edit(id);
}
// }

// ---------------Edit Record---------------------------
function edit(id) {
    document.getElementById("myForm").addEventListener("submit", function (event) {
        event.preventDefault();

        // Get form data
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;

        fetch('fetch-user.php')
            .then((response) => response.json())
            .then((data) => {
                var username_r = data.user_name;
                var password_r = data.password;
                console.log(username_r);
                console.log(password_r);
                console.log(username);
                console.log(password);

                if (username === username_r && password === password_r) {

                    // Fetch the data of the selected record using the ID (you can fetch this data from the server)
                    fetch('fetch-edit.php?id='+id)
                        .then((response) => response.json())
                        .then((data) => {
                            // Redirect to the "edit-record" page
                            // Populate the form fields with the retrieved data
                            document.getElementById('id').value = data.id;
                            document.getElementById('alias').value = data.alias;
                            document.getElementById('group').value = data.group;
                            document.getElementById('pass').value = data.pass;
                            document.getElementById('text').value = data.text;
                            window.location.href = 'edit-record.php';
                        })
                        .catch((error) => {
                            console.error('An error occurred:', error);
                        });


                } else {
                    alert("NOt Working");
                }

                // Clear the form fields
                document.getElementById("myForm").reset();
            })
            .catch((error) => {
                alert('error Cannot Fetch Data', "Cannot Fetch Data");
                console.error('An error occurred:', error);
                console.error(error.stack);
            });
    }
    )
}

i have tried to check where is the error with F12 key and also read the related text in stackoverflow, but i dont get the problem.