Remove ts errors from masked input

The StyledInput was changed to a Box as input, this changed is to avoid
having to use LegacyRef that the styled function required and a
ts-ignore was added to the MixinInput, because although we are using it
just as the lib docs exemplifies the ts returns an error.

frontend/src/ui/Input/Input.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { StyledLabel, StyledInput } from './styles'
 import JoyInput from '@mui/joy/Input'
+import { Box } from '@mui/joy'
 import { SxProps } from '@mui/joy/styles/types'
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
@@ -14,10 +15,11 @@ const InnerInput = React.forwardRef<HTMLInputElement, InputProps>(function Inner
   { label, ...props },
   ref
 ) {
-  const id = React.useId()
+  const reactId = React.useId()
+  const id = props.id || reactId
   return (
     <React.Fragment>
-      <StyledInput {...props} ref={ref} id={id} />
+      <StyledInput id={id} ref={ref} {...props} />
       <StyledLabel htmlFor={id}>{label}</StyledLabel>
     </React.Fragment>
   )

frontend/src/ui/Input/MaskedInput.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import JoyInput from '@mui/joy/Input'
+import { Box, Input as JoyInput } from '@mui/joy'
 import { SxProps } from '@mui/joy/styles/types'
 import { IMaskMixin, IMaskInput } from 'react-imask'
-import { StyledLabel, StyledInput } from './styles'
+import { StyledLabel, inputStyle } from './styles'
 
 export type Mask = React.ComponentProps<typeof IMaskInput>['mask']
 
@@ -17,7 +17,7 @@ type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
 type InnerInputProps = React.InputHTMLAttributes<HTMLInputElement> & InputProps
 
 const MixinInput = IMaskMixin(({ inputRef, ...props }) => {
-  return <StyledInput ref={inputRef} {...props} />
+  return <Box component="input" sx={inputStyle} ref={inputRef} {...props} />
 })
 
 const MaskedInputAdapter = React.forwardRef<HTMLElement, InnerInputProps>(function MaskedInput(
@@ -28,6 +28,8 @@ const MaskedInputAdapter = React.forwardRef<HTMLElement, InnerInputProps>(functi
 
   return (
     <>
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore */}
       <MixinInput {...props} inputRef={ref} id={id} onAccept={onAccept} />
       <StyledLabel htmlFor={id}>{label}</StyledLabel>
     </>

frontend/src/ui/Input/styles.tsx

@@ -1,4 +1,5 @@
 import { styled } from '@mui/joy/styles'
+import { SxProps } from '@mui/joy/styles/types'
 
 export const StyledLabel = styled('label')(({ theme }) => ({
   position: 'absolute',
@@ -9,7 +10,7 @@ export const StyledLabel = styled('label')(({ theme }) => ({
   transition: 'all 150ms cubic-bezier(0.4, 0, 0.2, 1)'
 }))
 
-export const StyledInput = styled('input')({
+export const inputStyle: SxProps = {
   border: 'none', // remove the native input border
   minWidth: 0, // remove the native input width
   outline: 0, // remove the native input outline
@@ -47,4 +48,6 @@ export const StyledInput = styled('input')({
     borderTopLeftRadius: 'calc(var(--Input-radius) - var(--variant-borderWidth, 0px))',
     borderBottomLeftRadius: 'calc(var(--Input-radius) - var(--variant-borderWidth, 0px))'
   }
-})
+}
+
+export const StyledInput = styled('input')(inputStyle)