React Model with Two Layouts

import { uid } from '../../../../helper/utils';
import Link from 'next/link';
import Image from 'next/image';
import Modal from "react-modal";
import styles from './faculty-card.module.css'

import { UPLOAD_PATH, preventRedirect } from '../../../../helper/utils';
import { useState } from "react";

const FacultyCard = ({
    name,
    slug,
    pic,
    qualification,
    highlights,
    customClass,
    layout
  }) => {
    return(
      <>
      {
        layout && layout === "two" ? (
          <LayoutTwo
            name={name}
            pic={pic}
            slug={slug} 
            qualification={qualification} 
            customClass={customClass}
            />
        ) : (
          <LayoutOne 
            name={name}
            pic={pic}
            slug={slug} 
            qualification={qualification} 
            customClass={customClass}
            highlights={highlights}
            />
        )
      }
      </>
    )
  }


export default FacultyCard;


const LayoutOne = ({
  name,
  slug,
  pic,
  qualification,
  highlights,
  customClass
}) => {

  const [showModal, toggleModal] = useState(false);

  function toggleHandler() {
    toggleModal(prev => !prev);
  }

return(
  <>
    {
      name || pic || qualification || highlights ? (
        <>
        <div className={customClass}>
          <div className={`${styles.FacultyBox}`} 
            onClick={ pic ? toggleHandler : preventRedirect }
          >
            <div className={styles.facultyPic}>
              <div className={styles.facultyPicBox}>
                {
                  pic ? <Image key={uid()} src={pic} alt={name} fill className="image"/> : null
                }
              </div>
            </div>
            
            {
              [
                name ? <h3 key={uid()} className={styles.red} dangerouslySetInnerHTML={{ __html:name }}/> : null,
                qualification ? <p dangerouslySetInnerHTML={{ __html:qualification }} key={uid()}/> : null
              ]
            }
            <span>Know More</span>
          </div>
        </div>
        {
          pic ? (
            <Modal
              isOpen={showModal}
              //onAfterOpen={afterOpenModal}
              onRequestClose={toggleHandler}
              className={styles.modal}
              contentLabel=""
              overlayClassName={styles.overlay}>
                <div className={styles.modelBorderBox}>
                {
                  [
                    name ? <h3 key={uid()} className={styles.red} dangerouslySetInnerHTML={{ __html:name }}/> : null,
                    highlights ? <div dangerouslySetInnerHTML={{ __html:highlights }} key={uid()}/> : null
                  ]
                }
                  <button onClick={toggleHandler} className={styles.modalClose}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                      <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
                    </svg>
                  </button>
                </div>
                
              </Modal>
          ) : null
        }
        </>
      ) : null
    }
    </>
)
}

const LayoutTwo = ({
    name,
    slug,
    pic,
    qualification,
    highlights,
    customClass
}) => {
  return(
    <>
      {
        name || pic || qualification ? (
          <div className={customClass}>
            <Link href={`/faculty/${slug}`} className={`${styles.FacultyBox}`} target="_blank">
              <div className={styles.facultyPic}>
                <div className={styles.facultyPicBox}>
                  {
                    pic ? <Image key={uid()} src={pic} alt={name} fill className="image"/> : null
                  }
                </div>
              </div>
              
              {
                [
                  name ? <h3 key={uid()} className={styles.red} dangerouslySetInnerHTML={{ __html:name }}/> : null,
                  qualification ? <p dangerouslySetInnerHTML={{ __html:qualification }} key={uid()}/> : null
                ]
              }
              <span>Know More</span>
            </Link>
          </div>
        ) : null
      }
      </>
  )
}




//css
.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 80%;
    height: auto;
    transform: translate(-50%, -50%);
    background-color: #fff;
    outline: none;
    border: solid 1px #ccc;
  }
  
  .modalClose {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    display: block;
    padding: 0;
    border-radius: 100px;
    background: none;
    transition: all 0.3s ease-in-out;
  }
  
  .modalClose:hover {
    background: linear-gradient(97.96deg, #ff5c35 3.95%, #ff3935 56.14%);
    transition: all 0.3s ease-in-out;
  }
  
  .modalClose svg {
    width: 25px;
    height: 25px;
    fill: #fff;
  }
  
  .overlay {
    background-color: rgb(0 0 0 / 80%);
    position: fixed;
    inset: 0px;
    z-index: 999999999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }