Handle null variable

src/components/Employee/EmpBanner.jsx

@@ -44,7 +44,19 @@ const EmpBanner = ({ profile, loggedInUser }) => {
         <div className="flex-grow-1 mt-1 mt-lg-1">
           <div className="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
             <div className="user-profile-info">
-              <h4 className="mb-2">{`${profile?.firstName} ${profile?.middleName} ${profile?.lastName}`}</h4>
+              <h4 className="mb-2">
+                <span>{profile?.firstName}</span>
+                {profile?.middleName ? (
+                  <span className="ms-1">{profile?.middleName}</span>
+                ) : (
+                  <></>
+                )}
+                {profile?.lastName ? (
+                  <span className="ms-1">{profile?.lastName}</span>
+                ) : (
+                  <></>
+                )}
+              </h4>
               <ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 mt-4">
                 <li className="list-inline-item">
                   <i className="icon-base bx bx-crown me-2 align-top"></i>