Change the file from .ts to .tsx otherwise you won't be able to use them without errors popping up

any other way to do it I really want the tsx to represent ui only and ts to represent logic

Yeah

You can stop writing jsx

And use React.createElement

And deal with that mess lol

With that said, it’s just a file extension, don’t worry about it

And don’t be so strict about separation

In fact it’s a bit of a code smell separating logic and ui in react

Having “fat” react components which do more than just rendering is fine

It's ok to have some logic in your components unless they get massive and you start doing really complex and heavy computations in them, but given your concern I think you'll understand when to split up your files in smaller chunks.

And again, tsx files just allow you to use jsx component syntax without having to do really low level React stuff