React add new item to a table - reactjs

Question

I'm working on a React project. I need to add new data to a table using a form. In here when I run 'npm start' command it will show 'Audi' in the list. But when I trying to add new vehicle brand it will not adding. There are no errors showing. Can anyone solve this problem.
This is my vehicleType.jsx file
import React, { Component } from "react";
import { Button } from "reactstrap";
import {FormGroup,Form,Input,Col} from "reactstrap";
class VehicleType extends Component {
constructor(props){
super(props);
this.state = {
items : ['Audi']
}
}
addItem(e){
e.preventDefault();
const {items} =this.state;
const newItem = this.newItem.value;
this.setState({
items : [...this.state.items,newItem]
})
}
render() {
const { items } = this.state;
return (
<>
<Form onSubmit={(e) => {this.addItem(e)}}>
<Row>
<Col md="3">
<FormGroup className="has-success">
<Input ref={(input) => this.newItem =input } className="is-valid" placeholder="Add" type="text"/>
</FormGroup>
</Col>
<Col md="4">
<Button color="primary" size="lg" type="submit" >
Add new vehicle brand
</Button>
</Col>
</Row>
</Form>
<Table className="align-items-center" responsive>
<tbody>
{
items.map(item => {
return(
<tr key = {item}>
<th scope="row" col-md-2>
<span className="mb-0 text-sm">
{item}
</span>
</th>
</tr>
)}
}
</tbody>
</Table>
</>
);
}
}
export default VehicleType;

Answer 1

I think it's some issue with the reactstrap on the ref they provide here is the working sandbox for your requirement
sandbox
if you still need to use reactstrap then you need to go with state variable like
<Input onChange={handleInputChange} value={this.state.addValue} className="is-valid" placeholder="Add" type="text"/>
in the handleChange add this
handleInputChange(e){
this.setState({addValue:e.target.value})
}

Answer 2

Try this
addItem(e){
e.preventDefault();
const {items} =this.state;
items.push(this.newItem.value)
this.setState({ items })
}