我收到此错误，不知道我遗漏了什么！

我有三个文件，HeaderOption.js，HeaderOptions.js，Search.js

这是HeaderOptions.js的代码

import HeaderOption from "./HeaderOption";
import  DotsVerticalIcon from "@heroicons/react/outline";

import  MapIcon from "@heroicons/react/outline";
import  NewspaperIcon from "@heroicons/react/outline";
import  PlayIcon from "@heroicons/react/outline";
import  SearchIcon from "@heroicons/react/outline";
import  PhotographicIcon from "@heroicons/react/outline";

   function HeaderOptions() {
    return (
     <div>
        {/* Left */}
        <div className="flex space-x-6">
            <HeaderOption Icon={SearchIcon} tile="All" Selected /> 
            <HeaderOption Icon={PhotographicIcon} tile="Images" />
            <HeaderOption Icon={PlayIcon} tile="Videos" />
            <HeaderOption Icon={NewspaperIcon}  tile="News" />
            <HeaderOption Icon={MapIcon}  tile="Maps" />
            <HeaderOption Icon={DotsVerticalIcon}   tile="More" />

        </div>


        {/* Right */}
        <div className="flex space-x-4">
            <p className="link">Settings</p>
            <p className="Link">Tools</p>

        </div>
    </div>
    );
}

export default HeaderOptions;

HeaderOption.js

function HeaderOption({Icon, title, selected}) 
{
    return (
        <div className={`flex`}>
            <Icon className="h-4" />
            <p className="hidden sm:inline-flex">{title}</p>

        </div>
    );
         
} 
  

export default HeaderOption;

我收到上述错误，我检查了两次导入，非常感谢您的帮助