api 키 호출 문제 질문드려요

안녕하세요, 덕분에 firebase 강의를 듣고, 웹앱을 만들고 있는데요

firebase api key 등 관련 정보는 .env파일에 넣고 관련 코드 작성해서 잘 작동이 되는데요

다른 api도 사용하고 싶어, 똑같이 .env 파일에 타 api 관련 정보를 넣고 했는데 이런 저런 오류가 나서요.
secret.json 파일을 만들고 gitignore에 작성해서 secret.json 파일에 있는 api key 등 관련 정보를 console.log통해서 확인할 수 있었는데요.

문제가, 하단에 작성한 코드에서 순서가
json data 불러옴 -> 각 변수에 data 저장 -> api 호출 이렇게 되어있는데, 
formData에 api_key가 없다고 에러가 나와서요.
제 생각엔, formData에 api 관련 정보를 넣기 전에, fetch(apiUrl~~, 기능을 수행하는 거 같은데
생각한 문제가 맞을까요? 어떻게 해결할 방법이 없는지.. 궁금합니다..

답변주시면 감사드립니당

    function 함수이름(imageUrl) {

        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'secret.json', false);  
        xhr.send();
        
        const responseData = JSON.parse(xhr.responseText); // JSON 데이터를 객체로 파싱
        const apiKey = responseData.apiKey;
        const apiSecret = responseData.apiSecret;
        const apiUrl = responseData.apiUrl; 
        // 해당 부분 console.log하면 정보가 나옴
        
        const formData = new FormData();
        formData.append("api_key", apiKey);
        formData.append("api_secret", apiSecret);
        formData.append("image_base64", imageUrl.split(",")[1]);

        fetch(apiUrl, {
            method: "POST",
            body: formData,
        })
        .then(response => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })

// 이하 생략