Reactjs 如何同时加载静态组件和动态组件？

如何同时加载静态组件和动态组件？我尝试添加useState变量并将其设置为false。如果数据不为null，则useState将变为true，并且将加载静态组件，但没有运气。我需要你们的帮助。我对这个完全陌生。如果有什么事情你不清楚，你可以问。提前谢谢

import './Profile.css';
import React from 'react';
import pic from '../../Public/img/RED_99941.png';


const Profile = ({ data }) => {
   
return (
    <div className="container">
        { data && // load until the data is not null
        <img src={pic} className="profilePic" alt="Profile Picure" />
        
        <div className="profile">
            {data.description}
        </div>
        }
    </div>
    );
}

export default Profile;

import'/Profile.css'；
从“React”导入React；
从“../../Public/img/RED_99941.png”导入图片；
常量配置文件=（{data}）=>{
返回(
{数据&&//加载，直到数据不为空
{data.description}
}
);
}
导出默认配置文件；

请检查并让我知道它是否有效。请注意