Input field validation in React Js?

Question

I am having a variable (in real app it is api) called data which contains value as nested items.

From the level 1 it has title which is displayed already then it has the array called sublevel which has multiple items inside it.

From the sublevel item, I am into making input fields for id, email, firstName, lastName which are already done and things are fine as of now..

In order to make the question clear I have stopped upto this.

Now I am in the need to implement validation for each field individually (At least required field validation and email regex)

Note: I don't have access to add/remove any value inside the data object because in real app it comes from api for which I don't have access.

So kindly help me how to handle the validation on each individual field.. Through reactstrap I am generating the form like,

const data = [
  {
     "Id":22383,
     "title":"Title 1",
     "quantity":5,
     "price":12,
     "sublevel":[
        {
           "confirm":3,
           "status":0,
           "email":"[email protected]",
           "ccoId":"test12",
           "firstName":"test",
           "lastName":"user",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        },
        {
           "confirm":3,
           "status":0,
           "email":"",
           "ccoId":"",
           "firstName":"",
           "lastName":"",
           "partId":22383
        }
     ]
  },
  {
     "Id":22383,
     "title":"Title 2",
     "quantity":1,
     "price":5,
     "sublevel":[
        {
           "confirm":3,
           "status":0,
           "email":"[email protected]",
           "ccoId":"test23",
           "firstName":"hello",
           "lastName":"world",
           "partId":22383
        }
     ]
  }
   ]

const {Component, Fragment} = React;
const {Button, Collapse, Form, FormGroup, Input} = Reactstrap;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: []
    };
  }

  componentDidMount(){

  }
  
  render() {
    return <div> 
      {
        data.map((levelOne, i) => {
           return(
             <div key={i}>
               <h4> {levelOne.title} </h4>
                {
                  levelOne.sublevel.map((subLevel, j) => {
                   return(
                     <div key={j}> 
                      <Form inline>
                        <FormGroup>
                            <Input name="id" maxLength="50" defaultValue={subLevel.ccoId} placeholder="ccoId" />
                            <Input name="email" type="email" defaultValue={subLevel.email} placeholder="Email" />
                            <Input name="firstName" maxLength="50" defaultValue={subLevel.firstName} placeholder="firstName" />
                            <Input name="lastName" maxLength="50" defaultValue={subLevel.lastName} placeholder="lastName" />
                           
                        </FormGroup>
                        </Form>
                     </div>
                    )
                  })
                }
             </div>
           )
        })
    }
   <Button color="secondary" size="lg" disabled>Submit</Button>
    </div>;
  }

}


ReactDOM.render(<App />, document.getElementById("root"));

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>

<div id="root"></div>

I am stucked very long time in it to implement validation on each individual input elements and hence please help me.

A big thanks in advance..

Expected result: