React Element appearing after second button click - reactjs

Question

Im fairly new to react and im trying to build a webapp. I'm having this problem when it comes to displaying a div that contains multiple input fields, the field lesson dont show until the second time I click my create button. However it's working perfectly when I render it with this code:
Note: Im rendering TestClonereact in CourseVideoStructure
This is CourseVideoStructure.js
import React, { Component } from 'react'
import Sidenavbar from '../../Components/Sidenavbar'
import '../../Style/pagestyle/CourseVideoStructure.css'
import Footer from '../../Components/Footer'
import { Avatar } from '#material-ui/core'
import 'react-dropzone-uploader/dist/styles.css'
import EdiText from 'react-editext'
import TestClonereact from '../../Components/TestClonereact'
export default class CourseVideoStructure extends Component {
onSave = val => {
console.log('Edited Value -> ', val)
}
id = 1;
state = {
listq: [],
}
lessons(id) {
return (
<div key={id} id={`sectionlesson-${id}`}>
<div className="section-titles">
<i class="material-icons" id="iconsectionlist" type="button" >list</i>
<EdiText
type='text'
value='Lesson Title'
onSave={this.onSave}
/>
<i class="material-icons" id="iconsectiondel" type="button">smart_display</i>
<i class="material-icons" id="iconsectiondel" onClick={e => this.remove(`${id}`)} type="button" >delete</i>
</div>
<div className="testh" >
</div>
</div>
)
}
addlesson1 = () => {
const listlesson = this.state.listq;
listlesson.push(this.lessons(this.id))
this.setState({ listlesson });
this.id++;
}
remove(id) {
const newList = this.state.listq.filter(lessons => lessons.key !== id);
this.setState({
listq: newList
})
}
addsection = () => {
const list = this.state.list;
list.push(this.section(this.id))
this.setState({ list });
this.id++;
}
render() {
return (
<div>
<Sidenavbar></Sidenavbar>
<nav class="navbar navbar-expand-md navbar-white">
<a class="navbar-brand" href="#"></a>
<Avatar className="avatar" aria-controls="simple-menu" aria-haspopup="true" src="https://avatars2.githubusercontent.com/u/56764954?s=400&u=57d85794b8c753245870e2f9051b303d1188b01d&v=4" ></Avatar>
</nav>
<div className="row">
<div className="fluid-xld" id="coursevideo-structure-xld">
<div className="course-structure-form-dsp col-md-12">
<h3 className="container"> Video Course Structure</h3><br></br><br></br>
<div className="course-structure-form " id="csf1">
<div className="section-heading">
<i class="material-icons" id="iconsection">api</i>
<EdiText
type='text'
value='Section Title'
onSave={this.onSave}
/>
</div>
{
this.state.listq.map(lessons => lessons)
}
<div className="addnewlesson" onClick={e => this.addlesson1()}>
<i class="material-icons" id="iconsectionde" role="button" type="button" >add_circle</i><span>Add New Lesson</span>
</div>
</div>
</div>
<div>
<TestClonereact></TestClonereact>
</div>
</div>
</div>
<Footer></Footer>
</div>
)
}
}
However when I try to render this component in CourseVideoStructure(the code above) it doesnt render as I would like it to:
This is TestClonereact.jsx:
import React, {useEffect, useReducer} from 'react'
import '../Style/pagestyle/CourseVideoStructure.css'
import EdiText from 'react-editext'
class TestClonereact extends React.Component {
constructor(props) {
super(props);
this.state = {
listq: [],
list: []
};
}
onSave = val => {
console.log('Edited Value -> ', val)
}
id = 1;
lessons(id){
return (
<div key={id} id={`sectionlesson-${id}`}>
<div className="section-titles">
<i class="material-icons" id="iconsectionlist" type="button" >list</i>
<EdiText
type='text'
value='Lesson Title'
onSave={this.onSave}
/>
<i class="material-icons" id="iconsectiondel" type="button">smart_display</i>
<i class="material-icons" id="iconsectiondel" onClick={e => this.remove(`${id}`)} type="button" >delete</i>
</div>
<div className="testh" >
</div>
</div>
)
}
section(id){
return (
<div key={id} id={`sds-${id}`}>
<div className="course-structure-form " id="csf1">
<div className="section-heading">
<i class="material-icons" id="iconsection">api</i>
<EdiText
type='text'
value='Section Title'
onSave={this.onSave}
/>
</div>
{
this.state.listq.map(lessons => lessons)
}
<div className="addnewlesson" onClick={async () => { this.addlesson();}}>
<i class="material-icons" id="iconsectionde" role="button" type="button" >add_circle</i><span>Add New Lesson</span>
</div>
</div>
</div>
)
}
addsection = () => {
const list = this.state.list;
list.push(this.section(this.id))
this.setState({ list });
this.id++;
}
addlesson = () => {
const listlesson = this.state.listq;
listlesson.push(this.lessons(this.id))
this.setState({ listlesson });
this.id++;
}
deletelesson = () => {
const list = this.state.list;
list.splice(this.section(this.id))
this.setState({ list });
this.id--;
}
remove(id) {
const newList = this.state.listq.filter(lessons => lessons.key !== id);
this.setState({
listq: newList
})
}
render(){
return (
<div>
{
this.state.list.map(section => section)
}
<div className="add-section-button-structure">
<button class="tablink" onClick={e => this.addsection()} >Add New Section</button>
<button class="tablink" onClick={e => this.deletelesson()} >Delete Section</button>
<button class="tablink" >Preview</button>
<button class="tablink" >Submit</button>
</div>
</div>)
}
}
export default TestClonereact
So the result in images is this:
Working fine and Added Lessons 1 by 1 in the same Section:
Working Fine and able to add lessons
Problem is when I click on Add Lesson in the Second section, nothing happens but when I click on Add section again, the lesson appear in the 3rd section not the second one:
Problem image here
I've kept tryint to solve this issue with no luck. Any kind of help is much appreciated.
Forgive me for any horrible coding.