Currently I am working on React(Frontend Part), I have bookmark folder list, users able to select one or more bookmark files from the above list

Actual UI:- Expecting UI:-

<BlockUI tag="div" blocking={foldersLoading}>
           <main id="candidates-list-container">
           {/* ref={(ref) => { mainBottom = ref; }}  */}
           <ul>
           {folders.map((folder) => {
           const folderID = folder.id;
           console.log(folderID);
           const folderName = folder.name;
           console.log(folderName);
           return (
             <li key={folderID}>
                <button
                  type="button"
                  className={`job ${
                     selectedFolders.indexOf(folderID) > -1 ? 'selected' : ''
                  }`}
                  disabled={
                     bookmarkedCandidate.is_bookmarked
                     && selectedFolders.indexOf(folderID) === -1
                  }
                  onClick={() => {
                     selectFolder(folderID, folderName);
                  }}
                 >
                 <h2
                   className={`${
                      selectedFolders.indexOf(folderID) > -1 ? 'selected' : ''
                      }`}
                 >
                 <input type="checkbox" className="jss1042" value="" />
                    {folderName}
                 </h2>
               </button>
             </li>
            );
           })}
         </ul>
        </main>
        </BlockUI>

In the image, Selected bookmark files are there. My question is currently, how can I show checkboxes instead of that folder icon () so that the user can select the check box. This is my code it doesn't work for me. Please help me, guys.