Next/React lazy load not working as expected for components - reactjs

Question

Hi all I am new in Next/react I am trying to lazy load one component. What my expectation is that component must loads when it is visible in user view port or once a page is fully rendered.
Its html code should not come in the first response. But after debugging I found that it is not working as expected.
I have tried below approaches
index.js
const ProductTabbedWidget = React.lazy(() => import('../../../components/ProductSearch/ProductTabbed/ProductTabbedWidget'));
and
const ProductTabbedWidget = dynamic(() => import('../../../components/ProductSearch/ProductTabbed/ProductTabbedWidget'),{suspense:true,});
<Suspense fallback={<div>Loading</div>}>
<ProductTabWidget vehicleType={type}></ProductTabWidget>
</Suspense>
Component: ProductTabbedWidget
const ProductTabWidget = (props) => {
const getData = () =>{
// fetch the data from api
// ex. locahost:7000/api/get-data
}
useEffect(()=>{
getData()
},[])
return (
<div></div>
)
}
The call to this api is visible in chrome when the page loads.
I am confused if react lazy is the rigt way to do this. I know this can be done using javascript but is there any way to do it ony by react or next.
I have gone through these answers but none of them works.
React suspense/lazy delay?
How to know if React lazy load component is working or not? React js
react
React lazy loading - when to use

Answer 1

In react side use lazy loading like this.
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
In Next JS
import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() =>
import('../components/hello').then((mod) => mod.Hello)
)
function Home() {
return (
<div>
<Header />
<DynamicComponent />
<p>HOME PAGE is here!</p>
</div>
)
}
export default Home