Next.js & TailwindCSS Error : Not working 'data-popper-placement'

data-popper-placement = working well

(Soluition : data-poper-placement) : Allow the part responsible for 'data-popper-placement to exist at the time of initial rendering without any conditions.

{session?.user ? (
            <div className='mt-2.5 mr-3'>
              <NotificationBell currentUser={session?.user.address} />
            </div>
          ) : (
            <div className='mt-3.5 mr-3'>
              <NotificationBell />
            </div>
          )}

not working

{session?.user ? (
            <div className='mt-2.5 mr-3'>
              <NotificationBell currentUser={session?.user.address} />
            </div>
          ) : (
            <div className='mt-3.5 mr-3'>
             
            </div>
          )}

Why?

The data-dropdown-toggle attribute is being used in JavaScript code that handles the toggling of the dropdown menu based on user interaction. If the NotificationBell component is not rendered, the JavaScript code responsible for toggling the dropdown may not be present, resulting in the attribute not functioning correctly.

To resolve this issue, you'll need to ensure that the JavaScript code handling the dropdown toggle is always present, regardless of whether the NotificationBell component is rendered or not. You can check the JavaScript code associated with the data-dropdown-toggle attribute and make sure it's included in your code, even when the NotificationBell component is not rendered.