How to use the semantic-ui-react.Form.Input function in semantic-ui-react

const UploadExistingKeys = props => {
  const { handleSubmit, pristine, submitting } = props;
  return (
     
      <h2>Upload Existing Keys</h2>
      <form>
        
        
          <label>Concord ID</label>
            
        

        {/* 
            Styling File Inputs
            http://jsfiddle.net/Dr_Dev/2nu1ngk5/ 
        */}

        
          <label>Public Key: </label>
            </form>

const CreatePlainSecret = props => {
  const { handleSubmit, pristine, submitting } = props;
  return (
    
      <h2>Create Plain Secret</h2>
      <form>
        
          <label>Concord ID</label>
          
        
        
          <label>Secret Phrase</label>
          
        
        {/* <div>
          <label>Generate Password</label>
            </div></form>

const CreateNewKeyPair = props => {
    const { handleSubmit, pristine, submitting } = props;
    return (
        
            <h2>Create New Key Pair</h2>
            <form>

                
                    <label>Concord ID</label>
                    
                
                {/* <div>
                <label>Generate Password</label>
                
            </div> */}

                {/* <div>
                <label>Store password</label>
                </div></form>

function PageOne(props) {
  return (
    
      

      

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Form, Responsive } from 'semantic-ui-react';
import styled from 'styled-components';
import RequestStatusBox from '../common/RequestStatusBox';
import { checkAccountAvailable, checkNewAccount } from '../../actions/account';

const CustomFormInput = styled(Form.Input)`
   
`;

class AccountFormAccountId extends Component {
    
    state = {
        accountId: this.props.defaultAccountId || ''
    }

    handleChangeAccountId = (e, { name, value }) => {
        if (value.match(/[^a-zA-Z0-9_-]/)) {
            return false
        }

        this.setState(() => ({
            [name]: value.trim().toLowerCase()

const CreateUserCredentials = props => {
  const { handleSubmit, pristine, submitting } = props;
  return (
    
      <h2>Create User Credentials</h2>
      <form>

        
          <label>Concord ID</label>
          
        

        
          <label>Username</label>
          
        

        </form>

import { filterSuirElementProps } from './utils';
import PropTypes from 'prop-types';

class FormsyInput extends Component {
  static propTypes = {
    id: PropTypes.string,
    name: PropTypes.string.isRequired,
    as: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    width: PropTypes.number,
    className: PropTypes.string,
    inputClassName: PropTypes.string,
    disabled: PropTypes.bool,
    inline: PropTypes.bool,
    passRequiredToField: PropTypes.bool,
    inputAs: PropTypes.oneOf([
      Input, TextArea, Form.Input, Form.TextArea,
    ]),
    errorLabel: PropTypes.element,
    required: PropTypes.bool,
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    instantValidation: PropTypes.bool,
    defaultValue: PropTypes.string,
    onBlur: PropTypes.func,
    isValid: PropTypes.func.isRequired,
    setValue: PropTypes.func.isRequired,
    getValue: PropTypes.func.isRequired,
    onChange: PropTypes.func,
    isPristine: PropTypes.func.isRequired,
    getErrorMessage: PropTypes.func.isRequired,
    validationError: PropTypes.string,
    validationErrors: PropTypes.object,
    validations: PropTypes.oneOfType(

placeholder="123-456-7890"
          validate={[
            required({
              msg: "Please enter the phone number of your emergency contact!"
            }),
            format({
              with: /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/,
              msg: "Please enter a valid phone number format. (123-456-789)"
            })
          ]}
        />

        

        

        {this.renderRSVPFormErrorMessage()}

const ResetPasswordForm = (props) => {
  return (
    <form loading="{props.resetLoading}" size="large">
      

      

      </form>

import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Form, Segment } from 'semantic-ui-react'

import styled from 'styled-components'

const CustomFormInput = styled(Form.Input)``

const CustomSegment = styled(Segment)`
   &&& {
      margin: 0px;
      padding: 12px 0 0 0;
   }
`

class StakingFormAmount extends Component {
   state = {
      amountStaking: '',
      amountPercent: 0
   }

   handleChangeAccountId = (e, { name, value }) => {
      if (value.match(/[^0-9.]/)) {