react (class based) : How can I update JSON object in parent component using setState after the object being passed in function from child to parent?

Question

I've JSON data at "Data.js" and in "App.js" it is initialized in state.

In "updateList" method of "App.js" I am getting "dataa" - from "insertIt" of "Form.js" and I need to "setstate" too in "updateList" of "App.js".

please help me correct my "insertIt" method of "Form.js" and "updateList" method of "app.js"

App.js

 import { Component } from 'react';
import Items from './Items';
import { list } from './data';
import Form from './form';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      listState : list
    }
    this.updateList = this.updateList.bind(this);
  }
  updateList(dataa){
    this.setState(ps=>({
      listState: [
        ...ps.listState,   //  HELP ME FIX THIS PART
        dataa
      ]
    }));
    return dataa;
  }
  render() {
    return (
      <div>
        <Items listofitems={this.state.listState}></Items>
        <Form onsubmit={this.updateList}></Form>
      </div>
    )
  }
}

Items.js

 import React, { Component } from "react";
class Items extends Component{
    render() {
        return(
           <div>
               {this.props.listofitems.map(i=> (
        <center>
            <h2>{i.title}</h2>
            <p>{i.details}</p>
        </center>
    ))}
            </div>
        )
    }
}
export default Items ;

Form.js

import React, { Component } from "react";
class Form extends Component{
    constructor(props){
        super(props);
        this.state={
            input1: '',
            input2: ''
        }
        this.insertIt = this.insertIt.bind(this);
        this.handler1 = this.handler1.bind(this);
        this.handler2 = this.handler2.bind(this);
    }
    handler1(e1){ this.setState({input1: e1.target.value});   }
    handler2(e2){ this.setState({input2: e2.target.value});   }
    insertIt(e){
        e.preventDefault();
        const newItem =
            {
                input1: this.state.input1,
                input2: this.state.input2,
            }
            this.props.onsubmit(newItem);
    }
    render() {
        return(
          <form onSubmit={this.insertIt}>
              <label>Enter both</label>
              <input type="text" value={this.state.input1} placeholder="in roman" onChange={this.handler1}></input>
              <input type="text" value={this.state.input2} placeholder="# in words" onChange={this.handler2}></input>
              <button type="submit">Insert</button>
          </form>
        )
    }
}
export default Form ;

Data.js

export const list = [
    {
      title: "I",
      details: "ONE",
    },
    {
        title: "II",
        details: "TWO",
      },
      {
        title: "III",
        details: "THREE",
      },
  ];

Thankyou

Answer 1

Finally got the answer!

updateList(dataa){
    this.setState(ps=>(
      { listState: [
        dataa,
        ...ps.listState 
      ]}
      )
    )
  }

"updateList" in "App.js", this works