NextJS/React Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)

Question

I'm trying to call a defined component, but getting this error (in title).

I have created two different files 1) HeaderOptions.js and 2) HeaderOption.js

I'm calling HeaderOption.js in HeaderOptions.js. All of the components are there, but I'm getting the error there.

Please advise and look into my code...

HeaderOptions.js

import HeaderOption from "./HeaderOption";
import { 
    DotsVerticalIcon,
    MapIcon,
    NewsPapersIcon,
    PhotoGraphIcon,
    PlayIcon,
    SearchIcon,
} from "@heroicons/react/outline";

function HeaderOptions() {
    return (    
    <div>
        {/* Left */}
        <div className="flex space-x-6">
            <HeaderOption Icon={SearchIcon} title="All" selected />
            <HeaderOption Icon={PhotoGraphIcon} title="Images" />
            <HeaderOption Icon={PlayIcon} title="Videos"  />
            <HeaderOption Icon={NewsPapersIcon} title="News" />
            <HeaderOption Icon={MapIcon} title="Maps"  />
            <HeaderOption Icon={DotsVerticalIcon} title="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 items-center'}>
        <Icon className="h-4" />
        <p className="hidden sm-inline-flex">{title}</p>
    </div>
    );
}
export default HeaderOption;

Answer 1

You have a typo in your icon imports - PhotoGraphIcon should be PhotographIcon and NewsPapersIcon should be NewspaperIcon. Icon list