onlyCountries cannot be passed a responsive data

[shiwofeiwo]

import PhoneInput from "react-phone-input-2";
import {PhoneInputProps} from "react-phone-input-2";
import React, {createElement, HTMLAttributes, useEffect, useState} from "react";

// @ts-ignore
interface MyPhoneInputProps extends PhoneInputProps, HTMLAttributes<HTMLElement> {
  myOnlyCountries?: string
}

const MyPhoneInput: React.FC<MyPhoneInputProps> = function MyPhoneInput(props) {
  const {
    value,
    onChange,
    myOnlyCountries,
    ...rest
  } = props;
  console.log(props)

  const [phone, setPhone] = useState('');
  const [only, setOnly] = useState(['af', 've']);

  useEffect(() => {
    if (typeof myOnlyCountries === 'string')
      setOnly(['cn', 'af'])
  }, [myOnlyCountries])

  const handlePhoneChange = (e) => {
    setPhone(e)
  }

  return <PhoneInput value={value || phone}
                     onChange={onChange || handlePhoneChange}

                     onlyCountries={only}

                     {...rest} />
}

MyPhoneInput.displayName = 'PhoneInput';
export default MyPhoneInput;

When I tried to pass a state to onlyCountries ( in useEffect ), it didn't work.