Hi, I'm getting a lot of these errors on console for one specific component. I don't understand it because it is returning the correct data from the db and the Select is populating with the correct options.

import { HouseSearch } from '../forms/search';
import { fetchNationalities } from '@/lib/data';
import './filters.scss';

export default async function HouseFilter() {
    const nationalities = await fetchNationalities();
    console.log(nationalities);

    return (
        <div className="filter-bar">
            <HouseSearch />
            <div className="filter-filters">
                {
                    nationalities &&
                    <select name="houseNationality" className="filter-dropdown" aria-label="Select Nationality">
                        <option value="">Please select nationality</option>
                        {nationalities.map(nationality => (
                            <option key={nationality.id} value={nationality.id}>{nationality.name}</option>
                        ))}
                    </select>
                }
            </div>
        </div>
    )
}

export async function fetchNationalities() {
    noStore();

    try {
        const data = await sql<Nationality>`SELECT * FROM nationalities`;
        console.log(data);
        return data.rows;
    } catch (error) {
        console.error('Database Error:', error);
        throw new Error('Failed to fetch nationalities data.');
    }
}