JSX element type 'Header' does not have any construct or call signatures

Question

I am using Semantic UI React in a typescript file to create a custom component. It hasn't thrown an error for the past 1 year, but I am suddenly seeing an error now. I have wrapped everything inside a Fragment. Would love some help to fix this. This is the code:

import React from "react";
import { Header } from "semantic-ui-react";

export type Props = {
  prop1?: string;
  prop2?: string;
  prop3?: string;
  prop4?: string;
};

export default function ContentHeader({
  prop1,
  prop2,
  prop3,
  prop4,
}: Props) {
  return (
    <>
      <Header as="h2" style={{ marginBottom: "-0.7em" }}>{prop1}</Header>
      <Header as="h3">{prop2}</Header>
      <Header as="h4" style={{ margin: "0px" }}>{prop3}</Header>
      <Header as="h4" style={{ color: "#545454"}}>{prop4}</Header>
    </>
  );
}

This is the error

TypeScript error in ContentHeader.tsx(23,8):JSX element type 'Header' does not have any construct or call signatures.  TS2604

P.S. I am opening this as a question again because a related question didn't seem to be resolved: TS2604: JSX element type 'Header' does not have any construct or call signature