As soon as I insert some lines of code in react js (Module-Typical) The result gets blank

Question

I just started working in react.js and was making my first project but I am facing some errors in the react modules. Tried the same in 2 compilers VS code and WebStorm but the same result is displayed in both

I don't know whether the problem is in module or code. Without these specific lines of Typical Module the Output is fine but as soon as the typical block is added whole page gets void/blank. What could be the possible solutions or either I have a misplaced div I am not able to figure this out.

the code:-

    import React from "react";
    import Typical from 'react-typical'
    export default function Profile() {
      return (
        <div className="profile-container">
          <div className="profile-parent">
            <div className="profile-details">
              <div className="colz">
                <a href="https://github.com/Akshit492">
                  <i className="fa fa-github"></i>
                </a>
                <a href="https://wa.me/918968796492">
                  <i className="fa fa-whatsapp"></i>
                </a>
                <a href="https://www.instagram.com/akshitk492/">
                  <i className="fa fa-instagram"></i>
                </a>
                <a href="https://www.linkedin.com/in/akshit-singla-codinghero">
                  <i className="fa fa-linkedin-square"></i>
                </a>
                <a href="https://twitter.com/AkshitSingla15">
                  <i className="fa fa-twitter"></i>
                </a>
              </div>
              <div className="profile-details-name">
                <span className="primary-text">
                  {" "}
                  Hello, I'M <span className="highlighted-text">Akshit</span>
                </span>
              </div>

Code which i add here and result gets blank

            <div className='profile-details-role'>
               <span className='primary-text2'>
                   {" "}
                   <h1>
                       {" "}
                       <Typical
                       loop={Infinity}
                       steps={[
                           "Enthusiastic Dev",
                           1000,
                           "Full Stack Developer",
                           1000,
                           "Competetive Coder",
                           1000,
                           "Student",
                           1000,
                       ]}
                       />
                   </h1>
               </span>
           </div>
  
 Rest Code:-

   

 </div>
           </div>
         </div>
       );
     }

With Typical output is:-
[enter image description here][1]

Without Typical output is:-

[enter image description here][2]



[1]: https://i.stack.imgur.com/6dzIK.png
[2]: https://i.stack.imgur.com/XvFP9.png