Help Fetching All Countries from my Table

import React, { useEffect, useState, ChangeEventHandler } from 'react';
import { createClient } from '../../utils/supabase/client';

type PersonalInformationData = {
    firstName: string;
    lastName: string;
    country: string;
    dateOfBirth: string;
};


type PersonalInformationProps = {
    data: PersonalInformationData;
    handleChange: ChangeEventHandler<HTMLInputElement | HTMLSelectElement>;
};

interface CountryData {
    countryName: string;
  }
  
const PersonalInformation: React.FC<PersonalInformationProps> = ({ data, handleChange }) => {
    const [countries, setCountries] = useState<string[]>([]);
    const supabase = createClient();

    useEffect(() => {
        const fetchCountries = async () => {
            const { data: countriesData, error } = await supabase
                .from('World Locations')
                .select('countryName');
    
            if (error) {
                console.error('Error fetching countries:', error);
                return;
            }
    
            if (countriesData) {
               
                const typedCountriesData = countriesData as CountryData[]; 
                const distinctCountries = Array.from(new Set(typedCountriesData.map(country => country.countryName)));
                setCountries(distinctCountries);
            }
        };
    
        fetchCountries();
    }, [supabase]);