How can I create a JSON of checkbox and dropdown values and store them in ReactJS?

How can I create a JSON of checkbox and dropdown values which are selected and store them in ReactJS in a proper structure. I am trying to store the values of checkboxes and dropdown according to what has been selected but could not figure out how to exactly.

This is the Form.js file:

export default class Form extends React.Component {


constructor(props){
    super(props)

this.state ={

  item_master_create:false,
  item_master_view:false,
  item_master_edit:false,
  item_master_delete:false,
  category_create:false,
  category_view:false,
  category_edit:false,
  category_delete:false,
  employee_email: "",
};


this.onCheckChange = this.onCheckChange.bind(this);
this.dropChange = this.dropChange.bind(this);





 }



dropChange = e =>{
    
    this.props.onChange({ [e.target.name]: e.target.value });
    this.setState({
        [e.target.name]: e.target.value
    }, () =>{
        console.log(this.state)
    });
}

onCheckChange = e =>{

    this.props.onChange({ [e.target.name]: e.target.value });
    console.log(e.target.checked);
    console.log(e.target.value);
    this.setState({
        [e.target.name]: e.target.checked
        // [e.taget.value]: e.target.value
    })
}

onSubmit = e =>{
    // e.preventDefault();

    this.setState({
        item_master_create:false,
        item_master_view:false,
        item_master_edit:false,
        item_master_delete:false,
        Name: "",
        Site: ""
      });

    this.props.onChange({
        item_master_create:false,
        item_master_view:false,
        item_master_edit:false,
        item_master_delete:false,
        Name: "",
        Site: ""
    });

    
}





render(){
  return (
<div className="form">
    <form>
        <h2>Form</h2>
      {/* DropDown 1 */}

    
    
      Select Name: <select name="employee_email" value={this.state.firstName}
        onChange={this.dropChange}>
        <option value="Select">Select</option>
        <option value="shiv98@gmail.com">shiv98@gmail.com</option>
        <option value="virat98@gmail.com">virat98@gmail.com</option>
        <option value="dhruv24@gmail.com">dhruv24@gmail.com</option>
        <option value="yash40@gmail.com">yash40@gmail.com</option>
        </select>

      <br /> <br />



      <Table striped bordered hover size="sm" style= responsive>
    <thead>
      <tr >
        <th className="cell" width='50'>ACTIVITY</th>
        <th className="cell">Create</th>
        <th className="cell">View</th>
        <th className="cell">Edit</th>
        <th className="cell">Delete</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td align="center" className="cell">Item Master</td>
        <td>
          <input 
           id="create_Item"
            type="checkbox"
            name="item_master_create"
            value={this.state.item_master_create ? "false" : "true"}
            checked={this.state.item_master_create}
            onChange={this.onCheckChange}
           />
        </td>
        <td>
          <input
            id="view_Item"
            type="checkbox"
            checked={this.state.item_master_view}
            name="item_master_view"
            value={this.state.item_master_view ? "false" : "true"}
            onChange={this.onCheckChange}
          />
        </td>
        <td>
          <input
            id="edit_Item"
            type="checkbox"
            checked={this.state.item_master_edit}
            name="item_master_edit"
            value={this.state.item_master_edit ? "false" : "true"}
            onChange={this.onCheckChange}              
          />
        </td>
        <td>
          <input 
            id="delete_Item"
            type="checkbox"
            checked={this.state.item_master_delete}
            name="item_master_delete"
            value={this.state.item_master_delete ? "false" : "true"}
            onChange={this.onCheckChange}
          />
        </td>
      </tr>
      <tr>
        <td align="center" className="cell">Category</td>
        <td>
          <input 
          id="create_Item"
            type="checkbox"
            name="category_create"
            value={this.state.category_create ? "false" : "true"}
            checked={this.state.category_create}
            onChange={this.onCheckChange}
           />
        </td>
        <td>
          <input
            id="view_Item"
            type="checkbox"
            checked={this.state.category_view}
            name="category_view"
            value={this.state.category_view ? "false" : "true"}
            onChange={this.onCheckChange}
          />
        </td>
        <td>
          <input
            id="edit_Item"
            type="checkbox"
            checked={this.state.category_edit}
            name="category_edit"
            value={this.state.category_edit ? "false" : "true"}
            onChange={this.onCheckChange}
          />
        </td>
        <td>
          <input 
            id="delete_Item"
            type="checkbox"
            checked={this.state.category_delete}
            name="category_delete"
            value={this.state.category_delete ? "false" : "true"}
            onChange={this.onCheckChange}
          />
        </td>
      </tr>          
    </tbody>
  </Table>

      
        <button onClick={e => this.onSubmit(e)}>Submit</button>


      <br /><br />

    </form>


    
</div>

       


 );

 }

}

App.js:

    class App extends React.Component {
  constructor(props){
    super(props)

  this.state = {
    fields: {},
    selectedValue: {}
  };

}
  onChange = updatedValue => {
    this.setState({
      fields: {
        ...this.state.fields,
        ...updatedValue
      }
    });
  };

    onSelect = (selectedList,selectedItem) =>{
      this.setState({selectedValue:selectedItem});
      this.setState({selectedList:selectedList});
      console.log(this.state.selectedValue);
    }

  render(){

    return(
      <div className = "App">

        <Form onChange={fields => this.onChange(fields)} />
        <Multiple onSelect ={this.onSelect} />
        {/* <App2 /> /}
        {/ <MaterialMultiple onChange={fields => this.onChange(fields)} /> /}
        <h4>
        {/  Converting data into JSON */}
        <h5>
        {JSON.stringify(this.state.fields, this.state.selectedValue, null, 2)}

        {JSON.stringify(this.state.selectedList, null, 2)}

        </h5>

      </div>
    )
  }


}

Multiple.js (For multi select dropdown checkbox)

    import React, {useState} from "react";
import {Multiselect} from "multiselect-react-dropdown";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";



const Multiple = (props) =>{
    const data =[
        {site_name:"VMM",id:1},
        {site_name: "All Cargo", id:2},
        {site_name: "Logos-B", id:3},
        {site_name: "Pragati One", id:5},
        {site_name: "Logos", id:6},
        {site_name: "Ecom Express", id:7}
      ]

    const [options] = useState(data);
    // const [selectedValue, setSelectedValue] = useState({})
    // const [personName, setPersonName] = React.useState([]);

    // const handleChange = (event) => {
    //     setPersonName(event.target.value);
    //     console.log(personName)
    //   };

    // const onSelect = (selectedList,selectedItem) =>{
    //   setSelectedValue(selectedItem);
    //   console.log(selectedValue);
    //   return selectedValue;
    // }
    
    return(
        <div style=>
            Select Site: <Multiselect options ={options} displayValue ="site_name" onSelect={props.onSelect} placeholder="Select Site" closeOnSelect={false} showCheckbox />
        </div>
    )
}

export default Multiple;