فیلتر blur بر روی کل body جز یک div با onClick

باید یه div بسازی که هر وقت روی اون اینپوت سرچ کلیک شد اون نمایش داده بشه فکر کنم اینطوری باشه اگه باگ داشت ببخشید خیلی وقته از ری اکت استفاده نکردم

function App() {
    const [show, setShow] = useState(false)

    return (
        { show && <div className="wrapper bg-gray-700/50 backdrop-blur" onClick={e => setShow(false)}></div> }
        <input className="search z-10" onFocus={e => setShow(true)} />
    )
}

const Foo = () => {
    const [showOverlay, setShowOverlay] = useState(false);

    useEffect(() => {
        showOverlay
            ? document.body.classList.add("overflow-hidden")
            : document.body.removeAttribute("class");
        return () => document.body.removeAttribute("class");
    }, [showOverlay]);

    return (
        <>
            {createPortal(
                <div
                    className={`${!showOverlay && "hidden"} fixed z-10 w-screen h-screen inset-0 backdrop-blur-sm backdrop-brightness-50`}
                ></div>,
                document.body,
            )}
            <div
                className={
                    "flex flex-col items-center gap-y-4 w-1/2 py-6 mx-auto"
                }
            >
                <input
                    type="text"
                    className={
                        "relative z-20 w-full p-2 border border-zinc-300 focus:outline-none"
                    }
                    placeholder={"Search"}
                    onFocus={() => setShowOverlay(true)}
                    onBlur={() => setShowOverlay(false)}
                />
                <p></p>
            </div>
        </>
    );
};

واسه اینکه کد چندقسمت نشه state رو لوکال نوشتم. state هایی که قرار هست توی کل پروژه ازشون استفاده بشه رو به صورت گلوبال تعریف کنید. useEffect هم واسه اسکرول هست. متن زیادی رو توی تگ p بزارید متوجه میشید چی به چیه

تشکر از هر سه عزیز
@mehdi8686h
@saghari
@Pouyab

سلام
به نظر من یک div بساز که کل صفحه رو بگیره و blur باشه
و سرچ بار رو بهش z-index بیشتر از اون div بده