Tailwind CSS Flex causing icons to shrink

Writing the Sidebar UI to align with the main logo - the icons have shrunk too much when each element has flex

Tried double checking code and taking on and off flex, checked for typos

UI now

Code below

const Icon = ({ styles, name, imgUrl, isActive, disabled, handleClick }) => (
    <div className={`w=[48px] rounded-[10px] ${isActive && isActive === name && 'bg-[#2c2f32]'} flex justify-center items-center ${!disabled && 'cursor-pointer'} ${styles}` } onClick={handleClick}>

        {!isActive ? (
            <img src={imgUrl} alt="fund-logo"
            className='w-1/2 h-1/2' />
        ) : (
            <img src={imgUrl} alt="fund-logo"
            className={`w-1/2 h-1/2 ${isActive !== name && 'grayscale'}`} />
           
        )
        } 
    </div>
 )

const Sidebar = () => {
const navigate = useNavigate();
const [ isActive, setIsActive] = useState('dashboard');
    return (
    <div className='flex justify-between items-center flex-col sticky top-5 h-[93vh]'>
        <Link to="/">
            <Icon styles="w-[52px] h-[52px] bg-[#2c2f32]" imgUrl={logo} />
        </Link>

        <div className='flex-1 flex flex-col justify-between items-center bg-[#1c1c24] rounded-[20px] w-[76px] py-4 mt-12'>

            <div className='flex flex-col justify-center items-center gap-3'>
            {navlinks.map((link) => (
                <Icon 
                key={link.name}
                {...link}
                isActive={isActive}
                handleClick={() => {
                    if(!link.disabled) {
                        setIsActive(link.name);
                        navigate(link.link);
                    }
                }} />
            )
            )}

            </div>
            </div> 

There is a typo , in className of Icon Component.

w=[48px]

Change it to

w-[48px]