[Bug]: 'Countdown' cannot be used as a JSX component. Its instance type 'Countdown' is not a valid JSX element.

[awesome1128]

Which package is this bug report for?

candy machine ui

Issue description

1. When I run Mint page using yarn start command, it returns an error like this.
2. TypeScript error in E:/project/blockchain/solana/metaplex/js/packages/candy-machine-ui/src/MintCountdown.tsx(108,8): 'Countdown' cannot be used as a JSX component. Its instance type 'Countdown' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("E:/project/blockchain/solana/metaplex/js/packages/candy-machine-ui/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. TS2786

Command

I ran yarn start command in /metaplex/js/packages/candy-machine-ui folder.

Relevant log output

TypeScript error in E:/project/blockchain/solana/metaplex/js/packages/candy-machine-ui/src/MintCountdown.tsx(108,8):
'Countdown' cannot be used as a JSX component.
  Its instance type 'Countdown' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("E:/project/blockchain/solana/metaplex/js/packages/candy-machine-ui/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.  TS2786

    106 |   if (date) {
    107 |     return (
  > 108 |       <Countdown
        |        ^
    109 |         date={date}
    110 |         onComplete={onComplete}
    111 |         renderer={renderCountdown}

Operating system

Windows

Priority this issue should have

High (immediate attention needed)

Check the Docs First

• [X] I have checked the docs and it didn't solve my issue

[Orlandster]

I was able to fix it by installing the latest types for react: yarn add @types/react@latest

[kameoxylon]

Latest @types react broke my ConnectButton, but I was able to fix that by doing const ConnectButton:React.FC<ButtonProps> = styled(WalletMultiButton)

[Skelt24]

yarn add @types/react@latest

It works for me also, thanks

[robsonharry]

I was able to fix it by installing the latest types for react: yarn add @types/react@latest

This works for me.

[octo8ight]

yarn add @types/react@latest works for me also.