How do I avoid returning null data using form in reactJS?Check Back-end Code also, Experts give me answer

When I try to type data into reactJs form through the API, the console returns null.

When I refresh the page on the backend CodeIgniter, it then displays the key values in the form of null.

How can I fix the problem data so that the console does not return null when I input through a reachJS form.

For instance, when I type in browser http://localhost/API/UserController/users, it returns null on every response of the reactJs form as follows:

{"user_id":"119","UserName":null,"user_email":null,"Password":null,"CreatedDate":"0000-00-00 00:00:00","Status":null,"Role":null,"VendorId":null}

When I check the code in
http://localhost/API/UserController/insertUsers, only the insertUser controller returns null.

Any input in regards to the problem would be appreciated.
My database code is:

CREATE TABLE `users`(
    `user_id` int(11) NOT NULL,
    `UserName` varchar(255) DEFAULT NULL,
    `user_email` varchar(40) DEFAULT NULL,
    `Password` varchar(1000) DEFAULT NULL,
    `CreatedDate` datetime DEFAULT NULL,
    `Status` int(11) DEFAULT NULL
    `Role` varchar(255) DEFAULT NULL,
    `VendorId` int(11) DEFAULT NULL
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

My Usermodel in CodeIgniter is:

class Usermodel extends CI_Model
{

public function get_users(){
    $query = $this->db->select("*")
              ->from("users")
              ->get();
    return $query;      
}
public function insert_users($data){
    $this->UserName = $data['UserName'];
    $this->user_email=$data['user_email'];
    $this->Password =$data['Password'];
    $this->CreatedDate=$data['CreatedDate'];
    $this->Status=$data['Status'];
    $this->Role = $data['Role'];
    $this->VendorId=$data['VendorId'];
    $this->db->insert("users",$this);
}
}

My UserController Controller in insertUsers Method is:

<?php 
defined('BASEPATH') OR exit('No direct script access allowed');
header('Access-Control-Allow-Origin: *');
if($_SERVER['REQUEST_METHOD']==='OPTIONS'){
    header('Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS');
    header('Access-Control-Allow-Headers:Content-Type');
    exit;
}
class UserController extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
        $this->load->model("usermodel","us");
    }
    public function users(){
        $query = $this->us->get_users();
        header("Content_Type:application/json");
        echo json_encode($query->result());
    }
    public function insertUsers(){
        $data = array(
            'UserName'      =>$this->input->post('UserName') ,
            'user_email'    =>$this->input->post('user_email'),
            'Password'      =>$this->input->post('Password'),
            'CreatedDate'   =>date("l jS of F Y h:i:s A"),
            'Status'        =>$this->input->post('Status'),
            'Role'          => $this->input->post('Role'),
            'VendorId'      => $this->input->post('VendorId'), 
        );
        $query =$this->us->insert_users($data);
        header("Content_Type:application/json");
        echo json_encode($query);
    }
}

Additionally, I fetch the API using reactJS, and when the user writes any data in form, it returns null in response Register.js as follows:

import React, { Component } from 'react';
import { Button, Card, CardBody, CardFooter, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';

class Register extends Component {
  constructor(props){
    super(props);
    this.state = {
      user_id:'',  Username:'', Password:'', user_email:'',CreatedDate:'',Status:'',Role:'',VendorId:'',
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
    handleChange(event){
    const state = this.state;
    state[event.target.name] = event.target.value;
    this.setState(state, () => console.log(state));
    // console.log(state); state get undefined
    }  

handleSubmit(event){
    event.preventDefault();
    fetch('http://localhost/API/UserController/insertUsers',{
      method:'POST',
      headers:{
        'Content-Type':'application/json',
        'Accept':'application/json'
      },
      body:JSON.stringify({
        user_id :this.state.user_id,
        Username:this.state.Username,
        Password:this.state.Password,
        user_email:this.state.user_email,
        CreatedDate:this.state.CreatedDate,
        Status:this.state.Status,
        Role: this.state.Role,
        VendorId:this.state.VendorId,
      })
    })
      .then(res =>res.json() )
      .then(data => console.log(data))
      .catch(err => console.log("show me error that cannot be specify",err))
  }
  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="9" lg="7" xl="6">
              <Card className="mx-4">
                <CardBody className="p-4">
                  <Form action="http://localhost/API/UserController/users" method="post" onSubmit={this.handleSubmit}>
                    <h1>Register</h1>
                    <p className="text-muted">Create your account</p>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-user"></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input required  type="text" name="UserName" value={this.state.UserName} onChange={this.handleChange} placeholder="Username" autoComplete="username" name="Username"  />
                    </InputGroup>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>@</InputGroupText>
                      </InputGroupAddon>
                      <Input required  type="text" placeholder="User email" name="user_email" value={this.state.user_email} onChange={this.handleChange} autoComplete="email" />
                    </InputGroup>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>
                          <i className="icon-lock"></i>
                        </InputGroupText>
                      </InputGroupAddon>
                      <Input required  type="password" placeholder="Password" value={this.state.Password} onChange={this.handleChange} name="Password" autoComplete="new-password" />
                    </InputGroup>
                    <Button color="success" block>Create Account</Button>
                  </Form>
                </CardBody>
                <CardFooter className="p-4">
                  <Row>
                    <Col xs="12" sm="6">
                      <Button className="btn-facebook mb-1" block><span>facebook</span></Button>
                    </Col>
                    <Col xs="12" sm="6">
                      <Button className="btn-twitter mb-1" block><span>twitter</span></Button>
                    </Col>
                  </Row>
                </CardFooter>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Register;