Problem with input and autofocus

Question

I’m having a little problem with inputs... I have two inputs: the first has autofocus and the other does not. However, whenever I type in the second input, it loses focus and focus goes back to the first input.

I read that React will render Component again whenever I type something. I tried to put Keys and etc, but nothing worked

In my form (Component called Signup), I have the following:

import React from 'react'
import Input from '../../components/Input'
import styles from './styles.scss'

class Signup extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      name: '',
      email: '',
    }
  }

  onSignup (e, userData) {
    e.preventDefault()
    this.props.onSignup(userData)
  }

  render () {
    return (
      <main className={styles.wrapper}>
        <div className={styles.formSide}>
          <h1>CADASTRAR</h1>

          <Input
            id="name"
            label="Nome"
            onChange={e => this.setState({ name: e.target.value })}
            autofocus={true}
          />
          <Input
            id="email"
            label="E-mail"
            onChange={e => this.setState({ email: e.target.value })}
          />
        </div>
      </main>
    )
  }
}

Signup.propTypes = {
  onSignup: React.PropTypes.func.isRequired
}

export default Signup

Already my Input Component is as follows:

import React, { PropTypes } from 'react'
import MaskedInput from 'react-maskedinput'
import styles from './styles.scss'

function Input (props) {
  let iconComp

  if (props.icon) {
    iconComp = (<img src={props.icon} alt="Icon" />)
  }

  let input = ''

  if (props.type === 'date') {
    input = (
      <MaskedInput
        ref={inp => inp && props.autofocus && inp.focus()}
        onChange={props.onChange}
        mask="11/11/1111"
        placeholder={props.placeholder}
        className={styles.input}
      />
    )
  } else {
    input = (
      <input
        ref={inp => inp && props.autofocus && inp.focus()}
        onChange={props.onChange}
        id={props.id}
        placeholder={props.placeholder}
        type={props.type}
        className={styles.input}
      />
    )
  }

  return (
    <div className={styles.wrapper}>
      <label htmlFor={props.id} className={styles.label}>{props.label}</label>
      <br />
      {input}
      {props.error &&
        <span className={styles.error}>
          {props.errorMessage}
        </span>
      }
      {iconComp}
    </div>
  )
}

Input.propTypes = {
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  icon: PropTypes.string,
  placeholder: PropTypes.string,
  type: PropTypes.string,
  autofocus: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  error: PropTypes.bool,
  errorMessage: PropTypes.string
}

Input.defaultProps = {
  icon: '',
  placeholder: '',
  type: 'text',
  autofocus: false,
  error: false,
  errorMessage: ''
}

export default Input

How to solve this problem?