Buscando ocultar/mostrar un componente en una aplicación web React/Nextjs/tailwind dependiendo del dispositivo en el que se encuentre el usuario (por ejemplo, escritorio vs tableta vs móvil) ya que hay ciertas teclas en el teclado disponibles para escritorio pero no para mesa y móvil ( por ejemplo, la tecla de tabulación). No quiero hacerlo por tamaño de pantalla ya que este es un problema del dispositivo (sin pestaña en el teclado) en lugar de un problema de tamaño de pantalla

Inicialmente, pensé en obtener el tipo de dispositivo (código al que se hace referencia en otro Q/A de stackoverflow), pero esto parece fallar cuando el usuario está en un dispositivo como un iPad y está usando la versión de escritorio para ese navegador (por ejemplo, safari de escritorio y no móvil safari). ¿Hay una mejor manera de manejar esto de modo que pueda verificar correctamente en qué dispositivo está el usuario para poder ocultar/mostrar el componente de reacción?

 const getDeviceType = () => { const ua = navigator.userAgent; if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) { return "tablet"; } if ( /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test( ua ) ) { return "mobile"; } return "desktop"; };