Una consulta tengo este componente

[surreal iris]

Este es el componente:

const AnimatedInput = forwardRef( ({ onChange, inputId, labelText, placeholder, className }, ref) => { return ( <StyledInputContainer className={className}> <StyledInput autocomplete='off' ref={ref} id={inputId} type='text' placeholder={placeholder} onChange={onChange} /> <StyledLabel htmlFor={inputId}>{labelText}</StyledLabel> </StyledInputContainer> ) } )

Y así lo estoy usando en mi form:
return ( <StyledAside $displayFilters={displayAdvancedFilters}> <StyledForm onSubmit={handleOnSubmit}> <AnimatedInput className='book-title' inputId='book-title' labelText='Book Title' placeholder='' ref={bookNameRef} onChange={handleDisableSubmit} />

[violet cipher]

es correcto, lo unico que mejoraria es el hecho que no tienes un rest para otros props. Si le llegas a pasar alguna no explotara la app pero seria mejor ya tenerlo definido

const AnimatedInput = forwardRef(
  ({ onChange, inputId, labelText, placeholder, className,...props }, ref) => {
    return (
      <StyledInputContainer className={className}>
        <StyledInput
          {...props}
          autocomplete='off'
          ref={ref}
          id={inputId}
          type='text'
          placeholder={placeholder}
          onChange={onChange}
        />
        <StyledLabel htmlFor={inputId}>{labelText}</StyledLabel>
      </StyledInputContainer>
    )
  }
)

y en cuanto a como lo usas en el form no me gustan esos magic strings jaja, supongo que tendra un estado o algo