Change Hamburger Icon in Bootstrap with menu off canvas - bootstrap-5

Question

I have a bootstrap 5 menu outside the canvas and I want to change the hamburger icon when closing and opening the menu so that a cross and the hamburger appear, but I can't do it
<nav id="main-nav" class="navbar navbar-expand-md navbar-dark bg-primary nav-menu-
home" aria-labelledby="main-nav-label">
<h2 id="main-nav-label" class="screen-reader-text">
<?php esc_html_e( 'Main Navigation', 'understrap' ); ?>
</h2>
<div class="<?php echo esc_attr( $container ); ?>">
<!-- <button type="button" class="btn-close btn-close-white text-reset" data-bs-
dismiss="offcanvas"
aria-label="Close"></button> -->
<!-- data-
toggle="modal" data-target="#menuModal" -->
<button class="navbar-toggler colapsed" type="button" data-bs-toggle="offcanvas" data-
bs-target="#navbarNavOffcanvas" aria-controls="navbarNavOffcanvas" aria-
expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap'
); ?>">
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon middle-bar"></span>
<span class="toggler-icon bottom-bar"></span>
</button>
<!-- <button type="button" class="btn-close text-reset" data-bs-
dismiss="offcanvas" aria-label="Close"></button> -->
<div class="offcanvas offcanvas-start bg-primary" tabindex="-1"
id="navbarNavOffcanvas">
<div class="offcanvas-header justify-content-end">
<button type="button" class="btn-close btn-close-white text-reset" data-
bs-dismiss="offcanvas" aria-label="Close"></button>
</div><!-- .offcancas-header -->
<!-- The WordPress Menu goes here -->
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'offcanvas-body ',
'container_id' => '',
'menu_class' => 'navbar-nav justify-content-end flex-grow-1 pe-
3',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'depth' => 2,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
);
?>
</div><!-- .offcanvas -->
</div><!-- .container(-fluid) -->
</nav><!-- .site-navigation -->
CSS
.navbar-toggler {
border: 0 !important;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* Lines of the Toggler */
.toggler-icon{
width: 30px;
height: 3px;
background-color: #e74c3c;
display: block;
transition: all 0.2s;
}
/* Adds Space between the lines */
.middle-bar{
margin: 5px auto;
}
/* State when navbar is opened (START) */
.navbar-toggler .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggler .middle-bar {
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
/* State when navbar is opened (END) */
/* State when navbar is collapsed (START) */
.navbar-toggler.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggler.collapsed .middle-bar {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar-toggler.collapsed .bottom-bar {
transform: rotate(0);
}
/* State when navbar is collapsed (END) */
/* Color of Toggler when collapsed */
.navbar-toggler.collapsed .toggler-icon {
background-color: #777777;
}
Please use the following tutorial https://jsfiddle.net/8xvaozm2/1/
but it is being used with toggle navigation and not with off canvas, does anyone know how it could be done?
there is a .show class that shows the menu when clicking, I used it but it didn't work for me