Can't convert undefined to object in react

Question

import React, { useState, useEffect } from 'react';
import { Formik, Form, Field } from 'formik';
import {
  useSelectedMerchant,
  useSelectedLabel,
  useUserData,
  useNotify,
} from 'src/hooks';
import {
  useGetAllCountries,
  useUpdateMerchantCountryAcceptance,
} from 'src/services/merchants';
import LoadingButton from '@cxp/react/LoadingButton';

const CountryAcceptance = () => {
  const merchant = useSelectedMerchant();
  const [countriesData, setCountriesData] = useState(null); // Initialize countriesData state variable
  const [blacklist, setBlacklist] = useState([]); // Initialize blacklist state variable

  useGetAllCountries(merchant?.guid, {
    onSuccess: (res) => {
      if (res) {
        setCountriesData(res); // Update countriesData with the fetched data
      }
    },
  });
  const updateCountryAcceptance = useUpdateMerchantCountryAcceptance();
  const notify = useNotify();

  // Function to handle form submission
  const handleSubmitForm = async () => {
    if (!merchant || !merchant.guid) {
      console.error('Merchant data is undefined or missing guid.');
      return;
    }
    // const { merchantGuid } = labelMerchantData;

    // Extracting idCountryCodes from blacklist
    const idCountryCodes = blacklist.map((country) => country.idCountryCode);

    updateCountryAcceptance.mutate(
      {
        merchantGuid: merchant?.guid,
        payload: {
          idCountryCodes, // Include idCountryCodes in the payload
        },
      },
      {
        onSuccess: () =>
          notify({ body: 'Country Acceptance settings updated successfully.' }),
      }
    );
  };

  // Function to handle click on a country
  // Function to handle click on a country
  const handleCountryClick = (idCountryCode, countryName) => {
    console.log('Clicked country:', idCountryCode, countryName);

    // Filter out the clicked country from countriesData
    const updatedCountriesData = countriesData.filter(
      (country) => country.idCountryCode !== idCountryCode
    );
    console.log('Updated countries data:', updatedCountriesData);

    // Update the blacklist using the functional form of setBlacklist
    setBlacklist((prevBlacklist) => {
      const newBlacklist = [...prevBlacklist, { idCountryCode, countryName }];
      console.log('Updated blacklist:', newBlacklist);
      return newBlacklist;
    });
  };

  return (
    <Formik enableReinitialize onSubmit={handleSubmitForm}>
      {({ handleSubmit }) => (
        <>
          <div>
            <div style={{ display: 'flex' }}>
              <div style={{ flex: '1', padding: '10px' }}>
                <h3 style={{ fontSize: '14px' }}>Blacklist</h3>
                <div style={{ border: '1px solid black', padding: '10px' }}>
                  {/* Display countries in the blacklist */}
                  {Array.isArray(blacklist) &&
                    blacklist.map((country) => (
                      <div key={country.idCountryCode}>
                        {country.countryName}
                      </div>
                    ))}
                </div>
              </div>
              <div style={{ flex: '1', padding: '10px' }}>
                <h3 style={{ fontSize: '14px' }}>Whitelist</h3>
                <div style={{ border: '1px solid black', padding: '10px' }}>
                  {/* Content for the Whitelist goes here */}
                </div>
              </div>
              <div style={{ flex: '2', padding: '10px' }}>
                <h3 style={{ fontSize: '14px' }}>All Countries</h3>
                <div
                  style={{
                    border: '1px solid black',
                    padding: '10px',
                    height: '300px',
                    overflowY: 'auto',
                  }}
                >
                  <div style={{ listStyleType: 'none', margin: 0, padding: 0 }}>
                    {/* Display countries in all countries */}
                    {countriesData &&
                      countriesData.map((country) => (
                        <div
                          key={country.idCountryCode}
                          onClick={() =>
                            handleCountryClick(
                              country.idCountryCode,
                              country.countryName
                            )
                          }
                        >
                          {country.countryName}
                        </div>
                      ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="d-flex justify-content-end">
            <LoadingButton onClick={handleSubmit} loadingText={undefined}>
              Submit
            </LoadingButton>
          </div>
        </>
      )}
    </Formik>
  );
};

export default CountryAcceptance;

Submit button results error "Can't convert undefined to object"