SPFX : TypeError: external__react_.useContext is not a function

Question

I am using office-ui-fabric card in my spfx web part. Getting the error as below.

    createComponent.tsx:51 Uncaught TypeError: external__react_.useContext is not a function
    at result (createComponent.tsx:51)
    at mountIndeterminateComponent (react-dom.development.js:14938)
    at beginWork (react-dom.development.js:15443)
    at performUnitOfWork (react-dom.development.js:18277)
    at workLoop (react-dom.development.js:18317)
    at HTMLUnknownElement.callCallback (react-dom.development.js:143)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:193)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:17564)
    at renderRoot (react-dom.development.js:18436)

backend.js:6 The above error occurred in the <Stack> component:
    in Stack (created by RealtimeData)
    in div (created by RealtimeData)
    in RealtimeData (created by Stock)
    in div (created by Stock)
    in div (created by Stock)
    in Stock

Code:

return (
            <div>

                 <Stack tokens={sectionStackTokens}>
                    <Card horizontal tokens={cardTokens}>
                    <Card.Item>
                        <Text>Basic horizontal card</Text>
                    </Card.Item>
                    </Card>

                    <Card horizontal onClick={alertClicked} tokens={cardTokens}>
                    <Card.Item fill>
                        <Image src="https://placehold.it/180x135" alt="Placeholder image." />
                    </Card.Item>
                    <Card.Section>
                        <Text variant="small" styles={siteTextStyles}>
                        Contoso
                        </Text>
                        <Text styles={descriptionTextStyles}>Contoso Denver expansion design marketing hero guidelines</Text>
                        <Text variant="small" styles={helpfulTextStyles}>
                        Is this recommendation helpful?
                        </Text>
                    </Card.Section>
                    <Card.Section styles={footerCardSectionStyles} tokens={footerCardSectionTokens}>
                        <Icon iconName="RedEye" styles={iconStyles} />
                        <Icon iconName="SingleBookmark" styles={iconStyles} />
                        <Stack.Item grow={1}>
                        <span />
                        </Stack.Item>
                        <Icon iconName="MoreVertical" styles={iconStyles} />
                    </Card.Section>
                    </Card>
                </Stack>
            </div>
        );