Выпадающий триггер материализации не работает, если обернут внутри

Question

У меня есть раскрывающийся список материализации, подобный этому:

        <li>
            <img
              src={(user && user.avatar) || profilePicture}
              alt=""
              className="circle responsive-img dropdown-trigger"
              data-target="profile-dropdown"
              style={{
                width: "40px",
                height: "40px",
                marginTop: "0.75rem",
                marginLeft: "0.4rem"
              }}
            />
          </li>

, когда он работает, он работает как задумано. Но всякий раз, когда я оборачиваю это, выпадающий список перестает отображать

          {isLoggedIn && (
            <li>
              <img
                src={(user && user.avatar) || profilePicture}
                alt=""
                className="circle responsive-img dropdown-trigger"
                data-target="profile-dropdown"
                style={{
                  width: "40px",
                  height: "40px",
                  marginTop: "0.75rem",
                  marginLeft: "0.4rem"
                }}
              />
            </li>
          )}