country-state-city does not load at all

Question

I'm continuously having a problem with country-state-city in my react app. Code to pull it is as follows and the error is right below it. I haven't the slightest clue and I've been searching everywhere.

import { useState, useEffect } from 'react';
import { Box, TextField, Button, InputAdornment } from '@mui/material';
import csc from 'country-state-city';

export const Markups = () => {

    const [country, setCountry] = useState({});

    useEffect(() => {
        const getStates = async() => {
            try {
                let country_abbrv = 'US';
                let country = await csc.getCountryByCode(country_abbrv);
                let temp_states = await csc.getStatesOfCountry(country.isoCode);

                console.log(temp_states);
            } catch (err) {
                console.log(err);
            }

        };
        getStates();
    })

TypeError: Cannot read properties of undefined (reading 'getCountryByCode')
    at getStates (index.js:13:1)
    at index.js:22:1
    at commitHookEffectListMount (react-dom.development.js:23142:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24920:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24885:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24872:1)
    at commitPassiveMountEffects (react-dom.development.js:24860:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27032:1)
    at flushPassiveEffects (react-dom.development.js:26978:1)
    at commitRootImpl (react-dom.development.js:26929:1)

Answer 1

According to their docs, that method does not exist on the default export. Instead it exports City, Country, etc.

import { Country, State, City }  from 'country-state-city';
City.getCountryByCode(countryCode);