My bootstrap modal has an error Uncaught TypeError: Cannot read properties of null (reading 'hide') at HTMLAnchorElement. when used

Bootstrap modal does not work on a specific page but works well in another page. When I click the Profile It only shows this error:

Uncaught TypeError: Cannot read properties of null (reading 'hide')     at HTMLAnchorElement.<anonymous> 

Here is the code:

<div id="settings-dropdown" class="dropdown-content1"><div class="profile-name-container" id="mobile"><div><a class="profile-name"><?php echo $_SESSION['firstName']; ?></a></div><div><a class="profile-role"><?php echo $_SESSION['role']; ?></a></div><hr></div><a class="profile-hover" href="#" data-bs-toggle="modal" data-bs-target="#viewModal" ><i class="bi bi-person profile-icons"></i>Profile</a><a class="profile-hover" href="#" id="logoutBtn"><i class="bi bi-box-arrow-left "></i>Logout</a></div>

I have tried changing the bootstrap versions, changing order of the scripts etc. and still no clue why does this occur.