I am encountering a TypeScript error when trying to use the Logo component from our design system package in a different project. The component seems to be imported correctly, but TypeScript is not recognizing it as a valid React component.

I expect the Logo component to be recognized as a valid React component and render correctly without any TypeScript errors.

I am encountering a TypeScript error when trying to use the Logo component from our design system package in a different project. The component seems to be imported correctly, but TypeScript is not recognizing it as a valid React component.Here is the Logo component from my design system:

import React from 'react';
import { styles } from "./Logo.styles";

type LogoProps = {
    variant: "colored" | "white";
};

const Logo: React.FC<LogoProps> = ({ variant }) => {
    const logoSrc =
        variant === "white"
            ? "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
            : "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg";

    return (
        <div css={styles.logoStyle}>
            <img css={styles.logoImage} src={logoSrc} alt="Logo" />
        </div>
    );
};

export default Logo;

I created this Logo component in my design system, then ran build and pack to generate a .tgz file. Inside another project, I installed the .tgz file and tried to use the Logo component as follows:

import React from 'react';
import Logo from '@ui-kit';

const HeaderV2: React.FC = () => {
    return (
        <>
            <Logo variant="white" />
        </>
    );
};

However, I got this error:JSX element type ‘Logo’ does not have any construct or call signatures.
What could be causing this error and how can I resolve it?