How to set the Predefined(country, state, city) value to the country-state-city npm using reactjs

Question

Functional Component. I need to fetch country , state and city data from the database and show to the Country State and city Form.Select

  const selectRef = useRef("");
  const selectRefst = useRef("");
  const selectRefct = useRef("");

  

  useEffect(() => {
    setCountrydata(Country.getAllCountries());
  }, []);

  useEffect(() => {
    setStatedata(State.getStatesOfCountry(country));
    setCitydata(City.getCitiesOfState(country, states));
  }, [country, states]);
[enter image description here](https://i.stack.imgur.com/gfn0t.png)
[enter image description here](https://i.stack.imgur.com/s8lHI.png)

const fndcntryname = (val) => {
    setStates("");
    setCountry(val);
    if (val) {
      const cntryname = Country.getCountryByCode(val);
      setCountryname(cntryname.name);
    }
  };
  const fndstatname = (statval, country) => {
    console.log(statval, country);
    setStates(statval);
    if (statval && country) {
      const statname = State.getStateByCodeAndCountry(statval, country);
      console.log(statname);
      setStatename(statname.name);
    }
  };

set the Predefined value to the country, state and city to the Form