I am new to react and I am working on a project. I want the user to input the time that he has spent on doing work. For example, the user can input 2:20 hours or 1:30 hours that he has spent on a task. I am using material UI and I have tried to use TextField with type=time. And it could work on desktop but it is rendered differently on mobile.

This is how it is looking on the desktop. And this is still good.

But as it is an time input field, on mobile it is rendered as a clock. And this is not what i want. I want input as hours and minutes spend.

This might be because of browser renders time input in this way on mobiles.

So is there any way that I can render it on mobile the same as it is rendered on desktop or there is any other react package available that I can use for time-duration input? I have tried some packages from npm but those do not work as expected.