Error when using Partial in nextjs with TypeScript

Question

I'm trying to develop a blog application using Next.js. In this app, there is a component that takes a markdown file and renders its content as a blog page.

import ReactMarkdown from 'react-markdown';
import { NormalComponents, SpecialComponents } from 'react-markdown/lib/ast-to-react';
import { materialLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import { FunctionComponent } from 'react';

interface IProps {
    content: string;
}

const Markdown: FunctionComponent<IProps> = ({content}) => {
    const components: Partial<NormalComponents & SpecialComponents> = {
        code({node, inline, className, children, ...props}) {
            const match = /language-(\w+)/.exec(className || '');
    
            return (!inline && match) ? (
                <SyntaxHighlighter style={materialLight} PreTag="div" language={match[1]} children={String(children).replace(/\n$/, '')} {...props} />
            ) : (
                <code className={className ? className : ""} {...props}>
                    {children}
                </code>
            )
        }
    }

    return <div className="markdown-body">
        <ReactMarkdown components={components} children={content} />
    </div>
}

export default Markdown;

However, when I tried to build the application, it fails, throwing the following error.

Type '({ node, inline, className, children, ...props }: { [x: string]: any; node: any; inline: any; className: any; children: any; }) => Element' is not assignable to type '(("code" | ((props: ClassAttributes & HTMLAttributes & ReactMarkdownProps) => ReactNode)) & (keyof IntrinsicElements | CodeComponent)) | undefined'. Type '({ node, inline, className, children, ...props }: { [x: string]: any; node: any; inline: any; className: any; children: any; }) => Element' is not assignable to type '"code" & CodeComponent'. Type '({ node, inline, className, children, ...props }: { [x: string]: any; node: any; inline: any; className: any; children: any; }) => Element' is not assignable to type '"code"'.

Since I'm very new to Next.js, I really couldn't get my head around why this happens. Searched a lot online, but couldn't find a satisfying answer. The only thing I could understand was that this is about some missing types, but couldn't make any progress beyond that.

How can I avoid this problem and build my Next.js app? all help is highly appreciated.