React Hook error : Invalid hook call: mismatching versions of React and the renderer or breaking the Rules of Hooks or more than one copy of React

Question

I'm fairly new to react and using hooks. I'm using downshift plugin and want to show a MultiSelection dropdown. I'm using hooks to do that but I keep getting this error in the browser:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM) You might be breaking the Rules of Hooks You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.

I have read the doc and checked for any rules broken but as per my knowledge everything is correct. Here is my function that uses hooks:

import React, { useState } from 'react'
import { useCombobox, useMultipleSelection } from 'downshift'

const DropdownMultipleCombobox=()=> {
const [inputValue, setInputValue] = useState('')
const {
    getSelectedItemProps,
    getDropdownProps,
    addSelectedItem,
    removeSelectedItem,
    selectedItems,
} = useMultipleSelection({ initialSelectedItems: [Demoitems[0], Demoitems[1]] })
const getFilteredItems = (Demoitems) =>
    Demoitems.filter(
        (item) =>
            selectedItems.indexOf(item) < 0 &&
            item.toLowerCase().startsWith(inputValue.toLowerCase()),
    )
const {
    isOpen,
    getToggleButtonProps,
    getLabelProps,
    getMenuProps,
    getInputProps,
    getComboboxProps,
    highlightedIndex,
    getItemProps,
    selectItem,
} = useCombobox({
    inputValue,
    Demoitems: getFilteredItems(Demoitems),
    onStateChange: ({ inputValue, type, selectedItem }) => {
        switch (type) {
            case useCombobox.stateChangeTypes.InputChange:
                setInputValue(inputValue)
                break
            case useCombobox.stateChangeTypes.InputKeyDownEnter:
            case useCombobox.stateChangeTypes.ItemClick:
            case useCombobox.stateChangeTypes.InputBlur:
                if (selectedItem) {
                    setInputValue('')
                    addSelectedItem(selectedItem)
                    selectItem(null)
                }

                break
            default:
                break
        }
    },
})
return (
    <div>
        <label {...getLabelProps()}>Choose some elements:</label>
        <div style={comboboxWrapperStyles}>
            {selectedItems.map((selectedItem, index) => (
                <span
                    style={selectedItemStyles}
                    key={`selected-item-${index}`}
                    {...getSelectedItemProps({ selectedItem, index })}
                >
                    {selectedItem}
                    <span
                        style={selectedItemIconStyles}
                        onClick={() => removeSelectedItem(selectedItem)}
                    >
                        &#10005;
                    </span>
                </span>
            ))}
            <div style={comboboxStyles} {...getComboboxProps()}>
                <input
                    {...getInputProps(getDropdownProps({ preventKeyAction: isOpen }))}
                />
                <button {...getToggleButtonProps()} aria-label={'toggle menu'}>
                    &#8595;
                </button>
            </div>
        </div>
        <ul {...getMenuProps()} style={menuMultipleStyles}>
            {isOpen &&
                getFilteredItems(Demoitems).map((item, index) => (
                    <li
                        style={
                            highlightedIndex === index ? { backgroundColor: '#bde4ff' } : {}
                        }
                        key={`${item}${index}`}
                        {...getItemProps({ item, index })}
                    >
                        {item}
                    </li>
                ))}
        </ul>
    </div>
)
}

export default DropdownMultipleCombobox;

my React component where I call the function :

export class TypeItemCollection extends React.Component {
render() {
    return (<DropdownMultipleCombobox/>)
}
}

my package.json:

{
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"babel-types": "^6.26.0",
"browserify": "^17.0.0",
"downshift": "^6.1.7",
"emotion": "^9.2.12",
"emotion-server": "^9.2.12",
"moment": "^2.29.1",
"moment-datetime": "0.0.2",
"react": "^16.8.2",
"react-datepicker": "^4.6.0",
"react-datetime": "^3.1.1",
"react-dom": "^16.8.2",
"react-emotion": "^9.2.12",
"react-helmet": "^6.0.0",
"react-jss": "^8.6.1",
"react-router-dom": "^5.0.0",
"react-scripts": "^5.0.0",
"react-select": "^3.2.0",
"reactstrap": "^8.0.0",
"styled-components": "^4.0.0"
 },
 "devDependencies": {
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.5",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-transform-react-jsx": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"@babel/preset-react": "^7.16.5",
"@testing-library/react": "^12.1.2",
"babel-jest": "^27.4.5",
"babel-loader": "^8.2.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babelify": "^10.0.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint-plugin-react-hooks": "^4.3.0",
"jest": "^27.4.5",
"react-test-renderer": "^17.0.2",
"typescript": "^4.5.4",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}

Please let me know where I'm going wrong here. Thanks.