i am following this mern stack tutorail here: https://www.youtube.com/watch?v=ngc9gnGgUdA&list=PL6QREj8te1P7VSwhrMf3D3Xt4V6_SRkhu&ab_channel=JavaScriptMastery

and am stuck at around 33:00

i have embedded the material-ui/core components - Container, AppBar, Typography as specified with thier attributes but it does not show the image or any of the material-ui/core components when i run it.

i have tested this just using a div tag with the image tag inside and it displays it fine so im not sure material-ui/core components cannot do it. So i know the issue is not with the image or image file path.

it compiles fine showing just warnings for the components i have not used however when it renders in the browser it does not show the image at all or any of the material-ui/core components.

here is my App.js file:

import React from 'react';
import { Container, AppBar, Typography, Grow, Grid } from '@material-ui/core';

import memories from './images/memories.png'

const App = () => {
    return (         
        <Container maxWidth="lg">
            <AppBar position="static" color="inherit">
                <Typography variant="h2" align="center">Memories</Typography>
                 <img src={memories} alt="memories" height="60" width="60" />
            </AppBar>
        </Container> 
    );
};

export default App;

here is my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App'

ReactDOM.render(<App />, document.getElementById('root'));

Any help would be much appreciated and more than happy to clarify anything :)