一切正常。然后我决定在我的项目中使用材质ui图标，即searchicon。然后它开始向我显示这个错误：
错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：
react和渲染器的版本可能不匹配（例如react dom）
你可能违反了钩子的规则
同一应用程序中可能有多个react副本请参见https://reactjs.org/link/invalid-hook-call 有关如何调试和修复此问题的提示。
连我都还没用过钩子。我在谷歌上搜索过，但还没有找到任何解决方案。提前感谢您的帮助！！下面是我的代码

import React from 'react'
import '../styles/Header.css'
import SearchIcon from '@material-ui/icons/Search';

function Header() {
    return (
        <div className="header">
            <img
                className="header__logo"
                src='https://pngimg.com/uploads/amazon/amazon_PNG11.png' alt='amazon-logo'
            />

        <div className="header__search">
            <input type="text" className="header__searchInput" />
            <SearchIcon className="header__searchIcon" />
        </div>

        <div className="header__nav">
            <div className="header__option">
                <span className="header_optionLineOne">
                    Hello, Guest
                </span>
                <span className="header_optionLineOne">
                    Hello, Sign In
                </span>
            </div>
            <div className="header__option">
            <span className="header_optionLineOne">
                    Returns
                </span>
                <span className="header_optionLineTwo">
                    Orders
                </span>
            </div>

            <div className="header__option">
                <span className="header_optionLineOne">
                    Your
                </span>
                <span className="header_optionLineTwo">
                    Prime
                </span>
            </div>
        </div>

        </div>
    )
}

export default Header