Logo not showing in AppBar (Material UI / React) - reactjs

Question

The logo is not showing on my AppBar for some reason. Here's what I am getting:
This is my code:
import {
AppBar,
Toolbar,
Typography,
makeStyles,
Button,
IconButton,
Drawer,
Link,
MenuItem,
} from "#material-ui/core";
import MenuIcon from "#material-ui/icons/Menu";
import React, { useState, useEffect } from "react";
import { Link as RouterLink } from "react-router-dom";
import logo from '../overland-ninja-logo.png';
const headersData = [
{
label: "Listings",
href: "/listings",
},
{
label: "Mentors",
href: "/mentors",
},
{
label: "My Account",
href: "/account",
},
{
label: "Log Out",
href: "/logout",
},
];
const useStyles = makeStyles(() => ({
header: {
backgroundColor: "#400CCC",
paddingRight: "79px",
paddingLeft: "118px",
"#media (max-width: 900px)": {
paddingLeft: 0,
},
},
logo: {
fontFamily: "Work Sans, sans-serif",
fontWeight: 600,
color: "#FFFEFE",
textAlign: "left",
},
menuButton: {
fontFamily: "Open Sans, sans-serif",
fontWeight: 700,
size: "18px",
marginLeft: "38px",
},
toolbar: {
display: "flex",
justifyContent: "space-between",
},
drawerContainer: {
padding: "20px 30px",
},
}));
export default function Header() {
const { header, logo, menuButton, toolbar, drawerContainer } = useStyles();
const [state, setState] = useState({
mobileView: false,
drawerOpen: false,
});
const { mobileView, drawerOpen } = state;
useEffect(() => {
const setResponsiveness = () => {
return window.innerWidth < 900
? setState((prevState) => ({ ...prevState, mobileView: true }))
: setState((prevState) => ({ ...prevState, mobileView: false }));
};
setResponsiveness();
window.addEventListener("resize", () => setResponsiveness());
}, []);
const displayDesktop = () => {
return (
<Toolbar className={toolbar}>
{femmecubatorLogo}
<div>{getMenuButtons()}</div>
</Toolbar>
);
};
const displayMobile = () => {
const handleDrawerOpen = () =>
setState((prevState) => ({ ...prevState, drawerOpen: true }));
const handleDrawerClose = () =>
setState((prevState) => ({ ...prevState, drawerOpen: false }));
return (
<Toolbar>
<IconButton
{...{
edge: "start",
color: "inherit",
"aria-label": "menu",
"aria-haspopup": "true",
onClick: handleDrawerOpen,
}}
>
<MenuIcon />
</IconButton>
<Drawer
{...{
anchor: "left",
open: drawerOpen,
onClose: handleDrawerClose,
}}
>
<div className={drawerContainer}>{getDrawerChoices()}</div>
</Drawer>
<div>{femmecubatorLogo}</div>
</Toolbar>
);
};
const getDrawerChoices = () => {
return headersData.map(({ label, href }) => {
return (
<Link
{...{
component: RouterLink,
to: href,
color: "inherit",
style: { textDecoration: "none" },
key: label,
}}
>
<MenuItem>{label}</MenuItem>
</Link>
);
});
};
const femmecubatorLogo = (
<img src={logo} />
);
const getMenuButtons = () => {
return headersData.map(({ label, href }) => {
return (
<Button
{...{
key: label,
color: "inherit",
to: href,
component: RouterLink,
className: menuButton,
}}
>
{label}
</Button>
);
});
};
return (
<header>
<AppBar className={header}>
{mobileView ? displayMobile() : displayDesktop()}
</AppBar>
</header>
);
}
I am quite new to react and I am sort of confused about how to go about this. I have tried all the tutorials but can't find the right solution. Any help would be much appreciated.

Answer 1

You are reassigning the value of logo after importing the image.
import logo from "../overland-ninja-logo.png"; // value of logo is correctly assigned to a path to the image
...
const useStyles = makeStyles(() => ({
logo: {
fontFamily: "Work Sans, sans-serif",
fontWeight: 600,
color: "#FFFEFE",
textAlign: "left"
},
}));
...
const { header, logo, menuButton, toolbar, drawerContainer } = useStyles(); // value of logo is incorrectly assigned to a an object
If you are using vscode, you should get a typescript warning at import logo:
'logo' is declared but its value is never read.ts(6133)