How do I solve an unexpected token error in React.js?

Question

I am working on a chat app and found the error below:

Module parse failed: Unexpected token (27:14)
You may need an appropriate loader to handle this file type.
|       columnNumber: 17
|     }
>   }), message?.attachments?.length > 0 ? /*#__PURE__*/React.createElement("img", {
|     src: message.attachments[0].file,
|     alt: "message-attachment",

Below is the sample code:

import React from "react";
const TheirMessage = ({lastMessage, message}) => {
    const isFirstMessageByUser = !lastMessage || lastMessage.sender.username != message.sender.username;
    return (
        <div className = "message-row">
            {isFirstMessageByUser && (
                <div 
                    className='message-avatar' 
                    style={{backgroundImage: 'url(${message?.sender?.avatar})'}}
                    />
            )}
            {message?.attachments?.length > 0
                    ? (
                        <img 
                            src={message.attachments[0].file}
                            alt='message-attachment'
                            className="message-image"
                            style={{marginLeft: isFirstMessageByUser ? '4px': '48px'}}
                        />
                    ) : (
                            <div className="message" style={{float: 'left', backgroundColor: '#CABCDC', marginLeft: isFirstMessageByUser ? '4px': '48px'}}>
                             {message.text}
                            </div>
                    )}        
        </div>
    )
}
export default TheirMessage;

I have no clue on how to go about it. Any feedback from you guys is highly appreciated.