lleve los fetch a los servicios y creé los tipos de datos

src/App.tsx

@@ -1,31 +1,37 @@
 import { useEffect, useState } from 'react';
-import './App.css'
-import Alumno from './Components/Alumno'
+import './App.css';
+import Alumno from './Components/Alumno';
+import { ObtenerUsuarios } from './services/servicioUsuario';
 
-
- function App() {
+function App() {
     const [loading, setLoading] = useState(true);
     const [alumnos, setAlumnos] = useState<any[]>([]);
 
     useEffect(() => {
-         fetch("https://jsonplaceholder.typicode.com/users")
-             .then(res => res.json())
-             .then(data => {
+        async function cargarDatos() {
+            setLoading(true);
+            try {
+                const data = await ObtenerUsuarios();
                 setAlumnos(data);
+            } catch (error) {
+                console.error('Error al obtener usuarios:', error);
+            } finally {
                 setLoading(false);
-             })
-             .catch(() => setLoading(false));
+            }
+        }
+
+        cargarDatos();
     }, []);
 
     if (loading) return <div>Cargando...</div>;
 
     return (
-         <div style={{ display: 'flex', flexDirection: 'row', gap: "1rem", flexWrap: 'wrap' }}>
+        <div style={{ display: 'flex', flexDirection: 'row', gap: '1rem', flexWrap: 'wrap', justifyContent: "center"}}>
             {alumnos.map((x) => (
                 <Alumno key={x.id} data={x} />
             ))}
         </div>
     );
- }
+}
 
-export default App
+export default App;

src/Components/Alumno.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import "./Alumno.css"
+import type { Usuario } from "../types/usuario";
 
-export default function Alumno({data}: {data: any}){
+export default function Alumno({data}: {data: Usuario}){
     const [alumno, setAlumno] = useState({ presente: false });
     return (
         <div id="aa"
@@ -22,9 +23,14 @@ export default function Alumno({data}: {data: any}){
                 <p>
                     Nombre: <b>{data.name}</b>
                 </p>
-                <p>
+
+                <p style={{ color: "gray" }}>
                     Usuario: <b>{data.username}</b>
                 </p>
+
+                <p style={{ color: "gray" }}>
+                    Usuario: <b>{data.email}</b>
+                </p>
             </div>
             <hr />
 

src/services/servicioUsuario.ts

@@ -0,0 +1,7 @@
+import type { Usuario } from "../types/usuario";
+
+export const ObtenerUsuarios = async (): Promise<Usuario[]> => {
+    const usuario = await fetch(`https://jsonplaceholder.typicode.com/users`);
+    const usuJson: Usuario[] = await usuario.json();
+    return usuJson;
+};

src/types/usuario.ts

@@ -0,0 +1,6 @@
+export interface Usuario {
+    id: number,
+    name: string,
+    username: string,
+    email: string
+}