Get data from multiple form it causes load more and become slow. How to avoid import or run code before render the element.

Here the below code run both element . ProductTitle and ProductDemo style is "none" but it consol.log("ProductTitle") and consol.log("ProductDemo") are executed.

Main js

import { lazy } from 'react';
const ProductTitle = lazy(() => import('./ProductTitle'))
const ProductDemo = lazy(() => import('./ProductDemo'))
import { useState } from 'react';
import { Panel } from 'react-instantsearch-dom';


const Product = () => {
    const [panel, SetPanel] = useState(0)
    
    return (<div>
        
         <button onClick={()=>SetPanel(panel +1)} >Next panel</button>
       <Suspense fallback={null}  >
        <div style={{ display: (panel === 1) ? 'none' : 'block' }} >
            <ProductTitle />
        </div>
        <div style={{ display: (panel === 2) ? 'none' : 'block' }} >
            <ProductDemo />
        </div>
    </Suspense>
    
    </div>);
}

export default Product;

ProductTitle.js

const ProductTitleA = ({ }) => {
    console.log("ProductTitle")
    
    return <div>
        this ProductTitle Panel
    </div>
}

ProductDemo.js

const ProductDemo = ({ }) => {
    console.log("ProductDemo")

    return <div>
        this ProductDemo Panel
    </div>
}