Navbar is not closing automatically in mobile while scrolling and visiting other page by navbar, How to change toggler hamburgur color

Question

In Mobile Navbar is not closing automatically when page scroll down or when we visit different page by clicking on content of navbar then it is not closing.

And How i change the color of toggler because my toggler is hiding with same color of navbar. I tried many things but still facing these navbar problem.

  This My code of Navbar 

import React from 'react'
import { NavLink } from 'react-router-dom';
import navlogo from '../Images/navlogo.png';
const Header = () => {
  return (
    <>
      <div className="container-fluid nav_bg">
        <div className='row'>
          <div className="col-10 mx-auto">


            <nav className="navbar  navbar-expand-lg bg-[#62aec5]  " >
              <div className="container-fluid">


                <NavLink className="navbar-brand" to="/"><img src={navlogo} alt=" op" width="150" height="200" class="d-inline-block align-text-top" />NanduFinix</NavLink>
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li className="nav-item">
                      <NavLink activeClassName='menu_active' exact className="nav-link" aria-current="page" to="/">Home</NavLink>
                    </li>
                    <li className="nav-item">
                      <NavLink activeClassName='menu_active' className="nav-link" to="About">About</NavLink>
                    </li>
                    <li className="nav-item">
                      <NavLink activeClassName='menu_active' className="nav-link" to="Question">Question</NavLink>
                    </li>
                    <li clasNames="nav-item">
                      <NavLink activeClassName='menu_active' className="nav-link" to="Notes">Notes</NavLink>
                    </li>
                    <li clasNames="nav-item">
                      <NavLink activeClassName='menu_active' className="nav-link" to="ContactUs">ContactUs</NavLink>
                    </li>
                   
                    


                  </ul>
                </div>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </>
  );
};
export default Header;

My CSS code in Index.css

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&display=swap');
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'EB Garamond', serif;
}




a:link { text-decoration: none; }
a:visited { text-decoration: none; }
/* a:hover { text-decoration: none; } */
a:active { text-decoration: none; }




 

.footer {
  background-color: #62aec5 !important;
  
} 



.navbar-brand {
  font-size: 1.9rem !important;
  color: rgb(255, 255, 255);
  
}



.navbar a {
  font-size: 1.3em;
  text-transform: capitalize;
  color: white;
}

.navbar a:hover {
  color: #180404!important;
}

.menu_active {
  font-weight: bold;
  border-bottom: 1px solid #565387;
  
}



 


@media (max-width: 991px) 
{
  .navbar-brand {
    font-size: 1.5rem !important; 
  }
  
  .menu_active {
    font-weight: bold;
    border-bottom: none;
    
  }


}