Currently, I am using a search field in my application that displays data as dropdown items when the user is typing. The library being utilized is React Bootstrap (bootstrap 5) and it's functioning perfectly. However, an issue arises where the dropdown persists even after clicking outside of it or navigating to a new link. This dropdown is positioned in a header component that does not re-render with the rest of the page due to the usage of NextJS. Does anyone have any suggestions on how to close a dropdown that lacks a toggle function?
<form className="d-none d-sm-inline-block" style={{ zIndex: "1000" }}>
<div className="input-group input-group-navbar">
<input type="text" className="form-control" placeholder="Search" aria-label="Search" onChange={(event) => { setSearchTerm(event.target.value); }} />
<button className="btn" type="button">
<Icon.Search className="align-middle" />
</button>
</div>
{searchData.length >= 1 && (
<Dropdown style={{ position: "absolute", background: "white" }} autoClose="outside">
{searchData.slice(0, 10).map((element, index) => {
return (
<Link key={element.agressoResourceId} href={`employees/69918`} passHref replace={true}>
<Dropdown.Item>
{element.firstname} - {element.lastname}
</Dropdown.Item>
</Link>
);
})}
</Dropdown>
)}
</form>