بستن موارد دلخواه در react

سلام دوستان.
من می خوام حالتی رو به وجود بیارم که وقتی روی جایی غیر از جای مدنظر کلیک شده اون المنت بره.
مثل خیلی از سایت ها.مثلا ما روی نوبار کلیک می کنیم و نوبار باز میشه و قسمتی از صفحه رو می گیره.حالا من می خوام حالتی رو به وجود بیارم که اگر هر جای صفحه غیر از این نوباری که بازه کلیک شد نوبار بسته بشه.برای این انجام این کار در react من از این کد استفاده کردم و جواب هم داد :

        window.onclick = (e) => {
            if (!e.target.matches('.class' )) {
                SetShow(false)
            }
        }

اما مشکل اینجاست که اگر در یک صفحه مثلا برای دو کامپوننت این تابع رو تعریف کنم تداخل به وجود میاد.وقتی از e.target لاگ می گیرم کامپوننت هایی که از این تابع استفاده کردم رو اصلا لاگ نمی گیره.انگار که اصلا وجود ندارند.همین عدم شناسایی باعث این میشه که کلاس هاشو نتونه بخونه و کد به درستی کار نکنه.
شما برای انجام این کار چی کار می کنید؟راه حلی دارید؟