Why doesn't flexing work for this spinner?

Question

The output- [Out put of the code][1]

I tried margin auto, justifying, alignment, and more but nothing worked. I am new to programming so I'm not able to understand where the mistake is. Can anyone please help me out!!

Code of the component

const LoadingSpinner = () => {
    return (
        <div className='d-flex justify-content-center align-items-center mx-auto' >
            <img className='d-flex justify-content-center align-items-center mx-auto' src="https://www.w3tweaks.com/images/essentials/css-loaders/window-icon-like-loader.gif" width={'300px'}alt="" />
        </div>
    );
};

export default LoadingSpinner;

***Whre I used it***

return (
        <section>
            <div className='fruits'>
                { fruits[0]?.name ?
                    (fruits.slice(0, 6)).map(fruit => <Fruit button={button(fruit._id)} fruit={fruit} key={fruit._id} />) : <LoadingSpinner/>
                }
            </div>
            <button onClick={()=>navigate('/manageitems')} className='manage-btn'>Manage Inventories</button>
        </section>
    );```


  [1]: https://i.stack.imgur.com/VTltu.png