The second code returns res as a mysql2.OkPacket | mysql2.RowDataPacket[] | mysql2.ResultSetHeader[] | mysql2.RowDataPacket[][] | mysql2.OkPacket[] | mysql2.ProcedureCallPacket . I need an array. I also need to use the res in the ui. Thanks in advance!

import mysql2 from 'mysql2'

export default async function connectTodb(StudentGrade: number, StudentSection: string) {
    const db = mysql2.createConnection({
        host: "..",
        user: "...",
        password: "..",
        database: ".."
    });

    const [rows, fields] = await db.promise().query("SELECT First_name, Last_name, Grade, Section FROM student_list WHERE Grade=? AND Section=? ", [StudentGrade, StudentSection]);
    // console.log(JSON.stringify(rows))
    return rows

}

'use client'
import connectTodb from './components/connectTodb';
export default function Home() {

    // const [, setStudents] = useState([]);
    let students;
    const StudentGrade: number = 9;
    const StudentSection: string = 'A'
    connectTodb(StudentGrade,StudentSection).then((res)=>console.log("Res------------"+res))
    return (
        <Box mt={1}>
            <Chip names={students.map((student: { [x: string]: string; }) => {
                student['First_name'] + " " + student['Last_name']
            })}></Chip>
...