I am getting these two warnings:
```
src\components\ControlPanel\caption.jsx
Line 92:35: Function declared in a loop contains unsafe references to variable(s) 'tagsText' no-loop-func
Line 142:37: Function declared in a loop contains unsafe references to variable(s) 'tagsText' no-loop-func
```

This references this function:
```
const performTagging = async (selected, source) => {
if (selectedTaggers.length > 0) {
try {
if (source === "Database") {
let tagsText = "";
for (const image of selectedImages) {
const fetchTagPromises = selectedTaggers.map((tagger) =>
axios
.get(
`http://localhost:8000/api/v1/tags/db/${<br/> image.id<br/> }?hf_url=${encodeURIComponent(<br/> tagger.hf_url<br/> )}&model=${encodeURIComponent(<br/> tagger.model<br/> )}&tag_file=${encodeURIComponent(tagger.tag_file)}`
)
.then((response) => ({
tagger: tagger.hf_url,
tags: response.data,
}))
.catch((error) => {
console.error(
`Error tagging image ${image.id} with tagger ${tagger.hf_url}: `,
error.response || error.message || error
);
return { tagger: tagger.hf_url, tags: [], error: true }; // Return empty tags on error
})
);

// Wait for all tagger requests for the current image to complete
const taggerResults = await Promise.all(fetchTagPromises);

// Start the tags text for the current image
tagsText += `Image ${image.id}\n`;

// Iterate over each tagger's result for the image and append the tags
taggerResults.forEach((result) => {
const formattedTags = result.tags
.map((tagObj) => {
const tag = Object.keys(tagObj)[0];
const score = Object.values(tagObj)[0];
return `\t${tag}: ${score.toFixed(4)}`; // Format to 4 decimal places
})
.join("\n"); // Join tags for a single image with a newline

if (!result.error) {
tagsText += `Tags by ${result.tagger}:\n{\n${formattedTags}\n}\n\n`;
}
});
}

setCaptionText(tagsText);
} else if (source === "Local") {
let tagsText = "";
for (const image of selectedImages) {
const fetchTagPromises = selectedTaggers.map((tagger) =>
axios
.get(
`http://localhost:8000/api/v1/tags/${<br/> image.id<br/> }?hf_url=${encodeURIComponent(<br/> tagger.hf_url<br/> )}&model=${encodeURIComponent(<br/> tagger.model<br/> )}&tag_file=${encodeURIComponent(tagger.tag_file)}`
)
.then((response) => ({
tagger: tagger.hf_url,
tags: response.data,
}))
.catch((error) => {
console.error(
`Error tagging image ${image.id} with tagger ${tagger.hf_url}: `,
error.response || error.message || error
);
return { tagger: tagger.hf_url, tags: [], error: true }; // Return empty tags on error
})
);

// Wait for all tagger requests for the current image to complete
const taggerResults = await Promise.all(fetchTagPromises);

// Start the tags text for the current image
tagsText += `Image ${image.id}\n`;

// Iterate over each tagger's result for the image and append the tags
taggerResults.forEach((result) => {
const formattedTags = result.tags
.map((tagObj) => {
const tag = Object.keys(tagObj)[0];
const score = Object.values(tagObj)[0];
return `\t${tag}: ${score.toFixed(4)}`; // Format to 4 decimal places
})
.join("\n"); // Join tags for a single image with a newline

if (!result.error) {
tagsText += `Tags by ${result.tagger}:\n{\n${formattedTags}\n}\n\n`;
}
});
}

setCaptionText(tagsText);
} else {
console.log("Invalid Source Selection…somehow");
}
} catch (error) {
// TODO: Handle errors
console.error("Error tagging image: ", error);

if (error.response) {
// Server responded with a status code that falls out of the range of 2xx
console.error(error.response.data);
console.error(error.response.status);
console.error(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
console.error(error.request);
} else {
// Something happened in setting up the request that triggered an error
console.error("Error", error.message);
}
}
} else {
console.log("No taggers selected.");
setCaptionText("No taggers selected.");
}
};

However, the function itself seems to be working fine, but it is a concern, please do a deep dive and offer the best solution, with step-by-step instructions.