react input 在fixed 区域问题

大佬们 我在h5移动端现在一个固定定位在底部bottom:0的弹窗内放一个输入框 输入框聚焦 弹窗内容区域和输入框的焦点都会出现抖动 怎么解决啊

import type { ReactNode } from "react"

interface TestPopupProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  children: ReactNode
}   

export function TestPopup({
  open,
  onOpenChange,
  children,
}: TestPopupProps) {
    if (!open) {
      return null
    }
  return (
    <div className="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 flex items-center justify-center"
      onClick={() => onOpenChange(false)}
     >
      <div className="absolute left-0 right-0 bottom-0" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>
  )
}

<TestPopup
          open={subscribeOpen}
          onOpenChange={setSubscribeOpen}
        >
          <div className="h-[50vh] w-full p-6 relative  bg-white overflow-y-auto">
             <input type="text" className="w-full h-12 px-4 border focus:outline-none focus:ring-0 border-[#79879B] rounded-md" />
          </div>
        </TestPopup>