React Displays Symbols Instead of Accents

I’m facing a persistent issue in my React application where accented characters are being displayed as symbols. This problem is observable even in the developer tools, where the accented characters are already appearing as symbols. I’m currently using the latest version of Microsoft Visual Studio

Strucutre of some of my components:

App.js:

javascript
Copy code
import React from 'react';
import './App.css';
// ... other imports

function App() {
    // ... App logic
    return (
        <div className="App">
            {/* Content involving text */}
        </div>
    );
}

export default App;

CadastroPacienteBiopsia.css:

css
Copy code
/* CSS styles showing how elements are styled */
.formulario-cadastro {
    /* styles */
}
/* ... other styles */

NeurocirurgiaDashboard.jsx:

javascript
Copy code
import React, { useState, useEffect } from 'react';
// ... other imports

function NeurocirurgiaoDashboard() {
    // Component logic
    return (
        <div className="dashboard">
            {/* Content involving text */}
        </div>
    );
}

export default NeurocirurgiaoDashboard;

Attempts Made:

Ensured that file encoding is set to UTF-8 in the editor.
Included in the HTML file.
Verified that the database and API responses are correct.

Despite these implementations, the issue with accented characters persists. The characters are displayed as symbols in the application as well as in the developer tools. This leads me to suspect the issue might be related to how React or my development environment is handling character encoding.

Could anyone suggest a solution or point out what I might be missing here? Any help or guidance would be greatly appreciated.

Thank you in advance!