Type '{}' is not assignable to type 'ReactNode'

I got this error, but only in Vercel, not locally, why?

error: 'FontAwesomeIcon' cannot be used as a JSX component.

./components/Services/ServiceContainer.tsx:25:6
12:01:54.967    Type error: 'FontAwesomeIcon' cannot be used as a JSX component.
12:01:54.967      Its element type 'ReactElement<any, any> | Component<FontAwesomeIconProps, any, any>' is not a valid JSX element.
12:01:54.968        Type 'Component<FontAwesomeIconProps, any, any>' is not assignable to type 'Element | ElementClass'.
12:01:54.968          Type 'Component<FontAwesomeIconProps, any, any>' is not assignable to type 'ElementClass'.
12:01:54.968            The types returned by 'render()' are incompatible between these types.
12:01:54.968              Type 'React.ReactNode' is not assignable to type 'import("/vercel/path0/node_modules/@types/styled-jsx/node_modules/@types/react/index").ReactNode'.
12:01:54.968                Type '{}' is not assignable to type 'ReactNode'.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../../styles/Services/ServiceContainer.module.css'
import { IconProp } from '@fortawesome/fontawesome-svg-core'
import dynamic from 'next/dynamic'
const FontAwesomeIcon = dynamic(
    async () => (await import('@fortawesome/react-fontawesome')).FontAwesomeIcon
)

export default function ServiceContainer(props: {
    title: string
    list?: string[]
    icon: IconProp
    text?: string
    isContainerNarrow?: boolean
}) {
    const { title, list, icon, text, isContainerNarrow } = props
    return (
        <div
            className={`${styles.serviceBoxContainer} ${
                isContainerNarrow ? styles.narrow : styles.wide
            }`}
        >
            <div className={styles.serviceBox}>
                <FontAwesomeIcon icon={icon} className={styles.icon} />
                <div className={styles.serviceBoxInner}>
                    <h2 className={'h2_2'}>{title}</h2>
                    {list && (
                        <ul>
                            {list.map((listItem: string) => (
                                <li key={listItem}>{listItem}</li>
                            ))}
                        </ul>
                    )}
                    {text && <p>{text}</p>}
                </div>
            </div>
        </div>
    )
}

{
    "dependencies": {
        "@date-io/date-fns": "^1.3.13",
        "@fortawesome/fontawesome-common-types": "^6.1.1",
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/free-solid-svg-icons": "^6.1.1",
        "@fortawesome/react-fontawesome": "^0.1.18",