makeStyle does not work with custom component - reactjs

Question

I am trying to make a simple navbar using material ui with a few buttons and a custom drop down menu component. When I try to style it using the makeStyle hook, the styling only applies to the material ui's buttons and heading but not the custom drop down component.
import React, { useContext } from "react";
import { makeStyles } from "#material-ui/core/styles";
import { AppBar, Toolbar, Typography } from "#material-ui/core";
import DropDown from "./DropDown";
import { Button } from "#material-ui/core";
import { AlgoContext } from "../AlgoContext";
const useStyles = makeStyles((theme) => ({
item: {
marginRight: theme.spacing(5),
},
}));
const MainHeader = () => {
const classes = useStyles();
const [algo, setAlgo] = useContext(AlgoContext);
return (
<div>
<AppBar elevation={0} position='static'>
<Toolbar>
<Typography variant='h6' className={classes.item}>
Pathfinding Visualiser
</Typography>
<Button variant='contained' className={classes.item}>
Visualise {algo.type}
</Button>
<DropDown className={classes.item}></DropDown>
<Button variant='contained' className={classes.item}>
Clear walls
</Button>
<Button variant='contained' className={classes.item}>
Clear path
</Button>
</Toolbar>
</AppBar>
</div>
);
};
export default MainHeader;

Answer 1

className is a default attribute of React element. You can not style your custom component by passing style object via className. Instead of that, you should pass it as a prop to DropDown component. Try this:
const MainHeader = () => {
const classes = useStyles();
const [algo, setAlgo] = useContext(AlgoContext);
return (
<DropDown itemStyle={classes.item}></DropDown>
);
};
export default MainHeader;
const DropDown = (props) => {
...
return (
<div className={props.itemStyle}>
...
</div>
)
}