Невозможно ввести / добавить значение для компонента ввода в reactjs

Question

Вот мой код для компонента ввода == >>>

import React from "react";
import {  Form, Col, Row } from "react-bootstrap";

const Input = props => {
  return (
    <Form.Group as={Row} className="mb-0 px-2 py-4">
      <Form.Label column sm={3}>
        {props.label}
      </Form.Label>
      <Col sm={9}>
          <Form.Control
              name={props.name}
              type={props.type}
              value={props.value}
              // onChange={props.handleChange}
          />
      </Col>
    </Form.Group>
  );
};

export default Input;

Вот код формы == >>

import React, { useState, useEffect } from 'react';
import { Form, Col, Row, Button } from "react-bootstrap";
import Input from "../../../components/form-containers/input";

export default class Submit extends React.Component {

    constructor(props){
        super(props);
        this.state = { 
            username: '23', 
            description: '',
            checked: false,
            errors: {}
        }
    }
    handleChange = event => {
        this.setState({ username: event.target.value });
    };
    handleChangeDescription = event => {
        this.setState({ description: event.target.value });  
      };

    handleChangeCheckbox = event => {
        this.setState({
            checked: !this.state.checked
        })
    }

    handleValidation() {
        let errors = {};
        let formIsValid = true;
        let name = this.state.username;
        let description = this.state.description;

        if(name == '' || description == ''){
            formIsValid = false;
            errors["name"] = "One or more fields cannot be empty";
        }
        this.setState({errors: errors});
        return formIsValid;
    }

    handleSubmit = event => {
        alert(` ${this.state.username} ${this.state.description} `)
        let finalValue = [];
        finalValue.push({
            username: this.state.username,
            description: this.state.description 
        })
        console.log("submitted value...", finalValue)
        event.preventDefault()
        if(this.handleValidation()){
            alert("Form submitted");
        }else{
            alert("Form has errors.")
        }
    };

    render(){
        const borderBottom = {
            borderBottom: "1px dashed #e2e5ec"
        };
        const content = this.state.checked 
            ? <Form.Group as={Row} className="mb-0 px-2 py-4">
                <Form.Label column sm={3}>
                    Parent
                </Form.Label>
                <Col sm={9}>
                    <select className="form-control" name="builder">
                        <option value="fluid">Fluid</option>
                        <option value="fixed">Fixed</option>
                    </select>
                </Col>
            </Form.Group>
            : null;
        return(
            <div className="kt-portlet">
                <div className="kt-portlet__head">
                    <div className="kt-portlet__head-label">
                        <h3 className="kt-portlet__head-title">Category Edit: </h3>
                    </div>
                </div>
                <Form className="kt-form" onSubmit={this.handleSubmit}>
                    <div className="kt-portlet__body">
                        <Input 
                            label={'Name'}
                            name={'name'}
                            type={'text'}
                            value={this.state.username}
                            onChange={this.handleChange}
                        />
                        <div style={borderBottom}></div>
                    </div>
                    <div className="kt-portlet__foot">
                        <div className="row align-items-center">
                            <div className="col-md-3 offset-md-3">
                            <div style={{color: 'red'}}>{this.state.errors["name"]}</div>
                                <Button variant="primary" type="submit" className="mr-4">
                                    Submit
                                </Button>
                                <Button type="submit" variant="default">
                                    Cancel
                                </Button>
                            </div>
                        </div>
                    </div>
                </Form>
            </div>
        );
    }
}

Первое, что у меня есть написанный компонент для поля ввода, а затем я вызвал поле ввода в форме. Проблема не в том, чтобы ввести любой текст в поле ввода. Не могли бы вы go через код и сообщить мне, в чем проблема. Может ли кто-нибудь помочь мне с этим. Заранее спасибо.