Autofocus on IonInput when Modal Is Shown using useIonMdal

Ionic Framework Ionic React
1

I’ve been looking at Managing Focus and I haven’t got it to work when working with modals created with useIonModal, or am I doing it wrong?

In my parent component i have

  const modalUsernameInput = useRef<HTMLIonInputElement>();
  const [presentAddUserModal, dismissAddUserModal] = useIonModal(
    UserViewModelModal,
    {
      dismiss: (data, role) => dismissAddUserModal(data, role),
      usernameInput: modalUsernameInput
    } as UserViewModelModalProps
  );

The part where I present the modal is

<IonFabButton
            onClick={() => {
              presentAddUserModal({
                cssClass: "popup-modal",
                onDidPresent: (ev) => {
                  console.log(modalUsernameInput.current);
                  modalUsernameInput.current?.focus();
                }
              });
            }}
          >
            <IonIcon icon={add} />
          </IonFabButton>

and then UserViewModelModal looks like


export interface UserViewModelModalProps extends ModalProps<AddUserViewModel> {
  usernameInput?: React.RefObject<HTMLIonInputElement>;
}

export const UserViewModelModal: React.FC<UserViewModelModalProps> = (props) => {
  return (
    <div className="wrapper ion-padding">
      <h1>Add User</h1>
      <IonInput
        label="Username"
        labelPlacement="fixed"
        ref={props.usernameInput}
      />
      <IonInput label="Password" labelPlacement="fixed" type="password" />
    </div>
  );
};

Why is it not focusing on the input? What did I do wrong? Thanks in advance