How to change constants and useEffect in reactjs from a function to a render component

I have this code in a function

function Lobby () {
but I wanted to pass it on to class Lobby extends Component { for a component with

render () {
return (
but putting these const and useEffect ect .. gives me an error, is there any way to "translate" this into a component?

I thank those who can help me

original code:

function Lobby () {
const [message, updateMessage] = useState('')
const [messages, updateMessages] = useState([])

useEffect(() => {
const handleNewMessage = newMessage =>
updateMessages([...messages, newMessage])
socket.on('chat.message', handleNewMessage)
return () => socket.off('chat.message', handleNewMessage)
}, [messages])

const handleFormSubmit = event => {
event.preventDefault()
if (message.trim()) {
socket.emit('chat.message', {
userid: myId,
lobby,
username: username,
message
})
updateMessage('')

const recibesound = document.getElementsByClassName("audio-element")[0]
recibesound.play()

}

}

const handleInputChange = event =>
updateMessage(event.target.value)

////teste
const handleTesteChange = event =>
updateMessage(event.target.value)

const handleTesteSubmit = event => {
event.preventDefault()
if (message.trim()) {
socket.emit('chat.message', {
userid: myId,
message

})
updateMessage('')

}

}
///teste

return(

//html

)}

export default Lobby;
goal:

class Lobby extends Component {

// same code

render() {
return(

//html

);
}
}