whats wrong in this react code? Images are not visible in browser.. please suggest

Question

import {Box, makeStyles } from '@material-ui/core';
import logo from '../image/ocean2.jpg';

const useStyles=makeStyles({
component:{
height:'100vh',
display:'flex',
alignItems:'center',
width:'65%',
margin:'0 auto'

},
leftContainer:{
backgroundImage: "url(" + {logo} + ")",
height:'100px',
width:'50px',
backgroundSize:'cover'

}
})

const Weather= ()=> {
const classes = useStyles();
return (
<Box className={classes.component}>
<Box className={classes.leftContainer}></Box>
<Box></Box>
</Box>

)
}
export default Weather;

Answer 1

I might be wrong but i don't think {logo} can be substituted by actual value .

Try using "url("+`${logo}`+") "
or `url(${logo}) `

Answer 2

@Abhay thanks its working now