The react-icons are not loading in my React/TailwindCSS navbar - reactjs

Question

I'm using TailwindCSS and react-icons, but I can't seem to load the icons used to toggle my menu.
import { useState } from "react";
import { HiMenuAlt4 } from "react-icons/hi";
import { AiOutlineClose } from "react-icons/ai";
import logo from "../../images/logo.png";
const NavbarItem = ({ title, classProps }) => {
return (
<li className={`mx-4 cursor-pointer ${classProps}`}>
{title}
</li>
);
};
const Navbar = () => {
const [toggleMenu, setToggleMenu] = useState(0);
return (
<nav className="w-full flex md:justify-center justify-between items-center p-4">
<div className="md:flex-[0.5] flex-initial justify-center items-center"
<img src={logo} alt="logo" className="w-32 cursor-pointer" />
</div>
<ul className="text-white md:flex hidden list-none justify-between items-center flex-initial">
{["Market", "Exchange", "Tutorials", "Wallets"].map((item, index) => (
<NavbarItem key={item + index} title={item} />
))}
<li className="bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]">
Login
</li>
</ul>
<div className="flex relative">
{toggleMenu ? (
<AiOutlineClose
fontSize={28}
className="text-white md:hidden cursor-pointer"
onClick={() => setToggleMenu(false)}
/>
) : (
<HiMenuAlt4
fontSize={28}
className="text-white md:hidden cursor-pointer"
onClick={() => setToggleMenu(true)}
/>
)}
</div>
</nav>
);
};
export default Navbar;