Warning: Invalid hook call. Hooks can only be called inside of the body of a function component

Hi I am building a spotify clone and at some point the guide tells me to add{Icon && <Icon className="sidebarOption__icon" />} to the SidebarOption file. However when I type the command my local host app disapears and I see a blank background. A lot of people have this problem in the comment section but no solution has been found. <Icon /> is enough to make the app go blank and give me the error, Warning: Invalid hook call. Hooks can only be called inside of the body of a function component along with many more. The purpose is to introduce icons in the app.

The code for SidebarOption.js is:

import React from 'react'
import "./SidebarOption.css";

function SidebarOptions({title, Icon}) {
 return (
  <div className="sidebarOption">
    {Icon  && <Icon className="sidebarOption__icon" />}
    {Icon ? <h4>{title}</h4> : <p>{title}</p> }

  </div>
)
}

export default SidebarOptions

and of Sidebar.js is:

import React from 'react'
import './Sidebar.css'
import SidebarOption from './SidebarOption'
import HomeIcon from '@mui/icons-material/Home';
import SearchIcon from '@mui/icons-material/Search';
import LibraryMusicIcon from '@mui/icons-material/LibraryMusic';

function Sidebar() {
 return (
  <div className="sidebar">
    <img 
      className="siderbar__logo"
      src="https://getheavy.com/wp-content/uploads/2019/12/spotify2019-830x350.jpg"
      alt=""
    />
    <SidebarOption Icon={HomeIcon} title="Home"/>
    <SidebarOption Icon={SearchIcon} title="Search" />
    <SidebarOption Icon={LibraryMusicIcon} title="Your Library" />
  </div>
 )
 }

 export default Sidebar

Thank your for the help in advance!!