is it bad to put your jsx in useState for react?

const = handleClick = (sort) => {
if(sort.props.id == 'default'){
setSort(<ArrowUpward id='up'/>)
}
else if(sort.props.id == 'up'){
setSort(<ArrowDownward id='down'/>)
}
else if(sort.props.id == 'down'){
setSort(<LineAxis id='default'/>)
}
}

the other alternative is using template logic which i think looks uglier, someone told me i did server side rendering in the browser

today the backend dev told me that he was trying to setup typescript for the company for so long and the company resisted him but he was super proud of his achievement of getting typescript into the project and i told him. sorry I agree with the company, you're stupid
i didn't tell him he was stupid ofcourse but i told him why i thought it was an unnecessary dep
i asked him are you doing a lot of number crunching? he said no
and i told him, most of the data you're going to recieve is in a string format or in json strings
very rarely are you going to get number data
and you can easily coerce the data into whatever you want