React hook file loading immediately even when the component bundle is not loaded lazily

Question

I have a react component:

// fileName: LazyComponent.tsx
import {useSomeHook} from '../useSomeHook';
const Component = () => {
const someDate = useSomeHook();
return <div>Hello World</div>
}

Here's Lazy component implementation:

// Filename: LazyLoader.tsx
import { Suspense, lazy } from 'react'
const LazyComponent = lazy(() =>
  import('../LazyComponent/index').then(({ Component }) => ({ default: Component })),
)
function LazyLoader() {
  return (
    <Suspense fallback={null}>
      <LazyComponent />
    </Suspense>
  )
}

export default LazyLoader

Now I have a component which loads the above component lazily:

// fileName: Main.tsx
/* eslint-disable import/no-cycle */
import LazyLoader from './LazyLoader'


const ActiveComponent = ({ enable }: { enable?: boolean }) => {
  if (!enable) return null
  return <LazyLoader />
}

export { ActiveComponent }

When I inspect my sources of devtools, I dont see LazyComponent.tsx which is expected when enable is false. However even though my LazyComponent.tsx is not loaded, my useSomeHook.tsx shows up in sources bundle of inspect tab which is getting me confused.

I have made sure that this is used nowhere else but still see it like this. Does anyone know what possibly could cause this?