Uncaught ERROR Invalid hook call. While using "<Typical>" Hooks can only be called inside of the body of a function component

Question

I was developing a profile of my portfolio using ReactJS. While I was using typical in my profile page as follows:

import "./Profile.css";
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">
            <div className="colz-icon">
              <a #">
                <i className="fa fa-facebook-square" />
              </a>
              <a href="#">
                <i className="fa fa-linkedin-square" />
              </a>
              <a href="#">
                <i className="fa fa-instagram" />
              </a>
              <a href="#">
                <i className="fa fa-github-square" />
              </a>
            </div>
            <div className="profile-details-name">
              <span className="primary-text">
                Hello, I'M <span className="highlighted-text">ANUP</span>
              </span>
            </div>

            <div className="profile-details-role">
              <span className="primary-text">
                <h1>
                  <Typical //Error comes after i try to import this here
                  
                  />
                </h1>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

There was no error in IDE's terminal, but it shows the following error in the browser:

Uncaught runtime errors: × ERROR Invalid hook call. Hooks can only be called inside of the body of a function component.

What can be the reason?