Tukukkk

I am new to reactJS i want to show Error message when someone leave empty filed. Form is already validated but not able to display error message.I Copied this form code from (ant-design) i will share it link to view original form and it working fine but in my form the error message is not working .
Original Form link Form Link

My Form Code

import React from 'react';

import styled from 'styled-components';

import 'antd/dist/antd.css';

import Input from 'antd/lib/input';



const FormCard = styled.div`

  max-width: 100%;

  overflow: hidden;

  transition: all 0.3s cubic-bezier(0.41, 0.094, 0.54, 0.07) 0s;

  margin-top: 30px;

`;



const FormItem = styled.div`

  font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI',

    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',

    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',

    'Segoe UI Symbol';

  font-size: 14px;

  font-variant: tabular-nums;

  color: rgba(0, 0, 0, 0.65);

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  list-style: none;

  margin-bottom: 18px;

  vertical-align: top;

`;



class RegisterStepOne extends React.Component {

  render() {

    const { getFieldDecorator } = this.props;

    return (

      <div>

        <FormCard>

          <FormItem label="E-mail">

            {getFieldDecorator('firstName', {

              rules: [

                {

                  required: true,

                  message: 'Please input your First name!',

                  whitespace: true,

                },

              ],

            })(<Input placeholder="First name" />)}

          </FormItem>

          <FormItem label="E-mail">

            {getFieldDecorator('lastName', {

              rules: [

                {

                  required: true,

                  message: 'Please input your Last name!',

                  whitespace: true,

                },

              ],

            })(<Input placeholder="Last name" />)}

          </FormItem>

          <FormItem label="E-mail">

            {getFieldDecorator('email', {

              rules: [

                {

                  type: 'email',

                  message: 'The input is not valid E-mail!',

                },

                {

                  required: true,

                  message: 'Please input your E-mail!',

                },

              ],

            })(<Input placeholder="Email" />)}

          </FormItem>



          <FormItem>

            {getFieldDecorator('lastPosition', {

              rules: [

                {

                  required: true,

                  message: 'Please input your Last Position!',

                  whitespace: true,

                },

              ],

            })(<Input placeholder="Present or last position" />)}

          </FormItem>



          <FormItem>

            {getFieldDecorator('lastCompany', {

              rules: [

                {

                  required: true,

                  message: 'Please input your Last Company!',

                  whitespace: true,

                },

              ],

            })(<Input placeholder="Present or last Company" />)}

          </FormItem>

        </FormCard>

      </div>

    );

  }

}

export default RegisterStepOne;