react native how to focus on function component

I design a page to input account and password.

And I create a function component "LabelPwd" to password.

I want focus on password field after user submit account.

But nothing happened after submit account by the code below.

Can anyone provide some advise?

Main Page:

const [pwdFocused, setPwdFocused] = useState(false);

return (
    <Controller
      render={({ onChange, value }) => (
        <LabelInput
          error={errors ? errors.userId : errors}
          label={t('common.userId')}
          value={value}
          autoFocus
          onSubmitEditing={setPwdFocused(true)}
        />
      )}
    />
    <Controller
      render={({ onChange, value }) => (
        <LabelPwd
          error={errors.password}
          onChangeText={v => onChange(v)}
          value={value}
          setFocused={pwdFocused}
        />
      )}
    />
);

LabelPwd

export default function LabelPwd({ value, onChangeText, error, setFocused }) {
  const [pwdIcon, setPwdIcon] = useState('eye-off');
  const pwdRef = useRef();

  useEffect(() => {
  //Seems didn't trigger here. 
    if (setFocused && pwdRef.current) {
      pwdRef.current.focus();
    }
  }, [setFocused]);

  function onPressPwdEye() {
    if (pwdIcon === 'eye-off') {
      setPwdIcon('eye');
      setSecureMode(false);
    } else {
      setPwdIcon('eye-off');
      setSecureMode(true);
    }
  }

  return (
    <>
      <Input
        errorMessage={error ? t('common.isRequired') : null}
        label={t('common.password')}
        rightIcon={{ type: 'feather', name: pwdIcon, size: 24, color: 'gray', onPress: onPressPwdEye }}
        secureTextEntry={secureMode}
        value={value}
        onChangeText={onChangeText}
        ref={pwdRef}
      />
    </>
  );
}