Issues with importing images for ReactJS App

Created an app with create-react-app and tailwindcss. I am trying to display local images in my website. I created this folder structure in src: assets/media/images/profile.jpg. The image is not displayed in browser. Here's what I am doing.

Here's the component in src/components/Hero.js:

import ImageOne from '../assets/media/images/profile.jpg';

const Hero = () => {
return (
    <div className="bg-white h-screen flex flex-col justify-center items-center">
        <h1 className="lg:text-9xl md:text-7xl sm:text-5xl text-3xl font-black mb-14">
            Text
        </h1>

        <img class="rounded" src={ImageOne} alt='Profile'/>
        
    </div>
)
}

export default Hero

The image is simply not displayed. Here's what the browser is loading: <img class="rounded" src="/static/media/profile.ba8339ef.jpg" alt="Profile">

Other stackoberflow answers, like React won't load local images, did not help me.