I want to append HTML when data is submit successfully through modal in React JS

I actually want to append HTML in React JS when user is submit data through modal on success I want to append HTML in React JS How can it possible using Hooks? Below I am sharing my code ? Please help to fix it out.

const handleClick = (e) => {
    e.preventDefault(); 
       const headers = {
       "Access-Control-Allow-Origin": "*",
       'Content-Type': 'multipart/form-data',
       }

       let formData = new FormData()
       formData.append('name', name)
       formData.append('list_category', list_category)
       formData.append('created_by', '629829078779cc4a00139c9a')
      api.post('checklist', formData, { headers: headers })
       .then(response => {
          const { data } = response
        
          if (data.status == '1') {
             console.log(data)
             setName('')
             toast.success(data.message);
             handleClose()
             appendData()
          }
          else {
             toast.error(data.message.errors.name.message);
          }
 
       }).catch(error => {
 
         throw (error);
     });
    
 };
 const appendData = () => {
    append.push('<div class="item"><div class="item-header" id="headingOne"><h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="title_heading">Dustin</span><div class="right90" id="629c501a1a3f2ad268d63d8a"> <a href="/">Add new task</a><i class="fa fa-angle-down"></i> <img src="Assets/img/close_icon.png"></div></button></h2></div><div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"><div class="t-p"><div class="table-responsive"><table class="table custom_table"><thead><tr><th>&nbsp;</th><th>Done</th><th>Task</th><th>&nbsp;</th><th>&nbsp;</th></tr></thead><tbody><tr><td class="custom_ty6"><img src="Assets/img/delete.png"></td><td class="cuts8"><label class="container99"><input type="checkbox"><span class="checkmark"></span></label></td><td class="custom_labe8"><input type="text" placeholder="Reserve tables for the event date"><img src="Assets/img/edit.png"></td><td><div class="cutom_plus"><img src="Assets/img/plus.png">Assign task</div></td><td><div class="cutom_plus"><img src="Assets/img/plus.png">Due Date</div></td></tr><tr><td class="custom_ty6"><img src="Assets/img/delete.png"></td><td class="cuts8"><label class="container99"><input type="checkbox"><span class="checkmark"></span></label></td><td class="custom_labe8"><input type="text" placeholder="Rent chairs and choose chair style"><img src="Assets/img/edit.png"></td><td><div class="cutom_plus"><img src="Assets/img/plus.png"><span>Assign task</span></div></td><td><div class="cutom_plus"><img src="Assets/img/plus.png">Due Date</div></td></tr><tr><td class="custom_ty6"><img src="Assets/img/delete.png"></td><td class="cuts8"><label class="container99"><input type="checkbox"><span class="checkmark"></span></label></td><td class="custom_labe8"><input type="text" placeholder="Rent microphone"><img src="Assets/img/edit.png"></td><td><div class="cutom_plus"><img src="Assets/img/plus.png">Assign task</div></td><td><div class="cutom_plus"><img src="Assets/img/plus.png">Due Date</div></td></tr></tbody></table></div></div></div></div>');
 }