Overlapping the same modal about nice-modal-react HOT 6 CLOSED

import NiceModal from '@ebay/nice-modal-react'
import type { FC } from 'react'

export const createNiceModal = <P extends {}>(component: FC<P>) => {
  const Dialog = NiceModal.create<P>(component);
  
  return (modalId: string) => {
    NiceModal.register(modalId, Dialog)

    const create = (props: P = {} as P) => NiceModal.show(modalId, props)

    const hide = () => NiceModal.hide(modalId)

    const remove = () => NiceModal.remove(modalId)

    return {
      create,
      hide,
      remove,
    }
  }
}

const modalFactory = createNiceModal(
  () => {
    // modal
    const { visible, remove, resolve } = useModal()
    // form
    const [form] = useForm()
  
    return (
      <Modal title="登录" open={visible} onCancel={remove} onOk={form.submit}>
        <Form form={form} onFinish={resolve}>
          <FormItem name="username" label="用户名">
            <Input placeholder="请输入密码" />
          </FormItem>
          <FormItem name="password" label="密码">
            <Password placeholder="请输入密码" />
          </FormItem>
        </Form>
      </Modal>
    )
  }
)

export const LoginModal = modalFactory('login')

export const registerModal = modalFactory('register')