React : {-} is not defined no-undef

error is -
Line 16:18: 'username' is not defined no-undef

Line 20:18: 'imageUrl' is not defined no-undef

Line 22:49: 'username' is not defined no-undef

Line 22:76: 'caption' is not defined no-undef

<Post username="elitorbi" caption="something in here" imageUrl="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"/>
  
<Post username="elitorbi" caption= "this is a caption" imageUrl="https://i.guim.co.uk/img/media/fe1e34da640c5c56ed16f76ce6f994fa9343d09d/0_174_3408_2046/master/3408.jpgwidth=1200&height=900&quality=85&auto=format&fit=crop&s=0d3f33fb6aa6e0154b7713a00454c83d"/>

================================================================

import React, {useState} from 'react'
import './post.css'
import './App.js'
import Avatar from "@material-ui/core/Avatar"


function Post() {
    return (
        <div className="post">
            <div className="post__header">
            <Avatar
                className="post__avatar"
                alt= 'elitorbi'
                src="/static/images/avatar/1.jpg"
            ></Avatar>
            <h3>**{username}**</h3>
            </div>
            <img
            className = "post__image" 
            src={imageUrl} />
            
            <h4 className="post__text"><strong>{username}</strong><n> </n>{caption}</h4>
        </div>
    )
}

export default Post