there is a Chat component (parent), it passes the value of props, which stores the data id, img Id, chatName in Conversation (child), in which they are rendered. the Conversation component has a ConversationItem component, that is, Conversation is the parent of the ConversationItem. The ImgId must be passed from the Conversation component to the ConversationItem. to draw it there.

Here is an example of my code

Chat

const Chat = () => {
return (
    <div className='app1'>
        <ConversationList/>
        {
            user.map(conversation =>

                <Conversation
                    key={conversation.id}
                    data={conversation}
                />
            )
        }

    </div>
);
}
export default Chat;

Conversation

export default function Conversation(props) {
        const {id, imgId, chatName} = props.data;
        const messages = JsonData;
        return (
    
            <div>
                <div >
                    <img src={imgId} />
                </div>
                <div >
                    {messages.map((message) => {
                            return (
                                <ConversationItem message={message} imgId={imgId} key={message.mes_id}/>)
                        }
                    )}
                </div>
            </div>
        );
    }

ConversationItem

const ConversationItem = ({message}, imgId) => {
    return (
        <div>
                    <div className="img_cont_msg">
                        <img src={imgId.data}/>
                    </div>
                    <div classname = "msg-text">
                        
                            {message.text_msg}
                    </div>
            
        </div>
    );
};

export default ConversationItem;

at the moment, the code transmits something and outputs not a placeholder, but a void. if I do

<img src={imgId.data}/>

to

<img src={imgId}/>

the placeholder image not found will be displayed. how to implement it correctly?