Circle checkbox in react.js

I am currently learning reacj.js and I am making a Todo app using react.js. I need to make a checkbox alongside the task and when that checkbox is clicked the task should move to completed section. I made it possible but I need a circle checkbox. How can I make a circle checkbox ???

Here's my code :

Javascript :

import React from 'react'
import {useState} from 'react'


function Body() {
    const [toDos,setToDos] = useState([])
  const [toDo,setToDo] = useState('')
  const deleteTodo = idToDelete => setToDos(currentTodos => currentTodos.filter(toDo => toDo.id !== idToDelete))
    return (
        <div className="bodyoftodo"> 
            <div className="input">
        <input value={toDo} onChange={(e)=>setToDo(e.target.value)} type="text" placeholder="🖊️ Add item..." />
        <i onClick={()=>setToDos([...toDos,{id:Date.now() ,text: toDo, status: false}])} className="fas fa-plus"></i>
      </div>
      <div className="todos">
        {toDos.map((obj)=>{
          return(
            <div className="todo">
              <div className="left">
                <input onChange={(e)=>{
                  console.log(e.target.checked);
                  console.log(obj);
                  setToDos(toDos.filter(obj2=>{
                    if(obj2.id===obj.id){
                      obj2.status=e.target.checked
                    }
                    return obj2
                  }))
                }} value={obj.status} type="checkbox" name="" id="" />
                <p className='todoName' >{obj.text}</p>
              </div>
              
              <div className="right">
                <i onClick ={() => deleteTodo(obj.id)} className="fas fa-trash"></i>
              </div>
            </div>)
        }) }
        
        
        {
          toDos.map((obj)=>{
            if(obj.status){
              return(<h1 className="finished" >{obj.text}</h1>)
            }
            return null
          })
        }
        
        
        
      </div>
        </div>
    )
}

export default Body

CSS :

* {
  margin: 0;
  padding: 0;
  
  font-family: "Segoe","Segoe UI","Arial","sans-serif";
}

.body{
  font-family: 'Roboto', sans-serif;
  
  
}

.app {
  position: absolute;
  
  transform: translate(-50%, -10%);
}

.app {
  text-align: center;
  
}

.app h1,
h2 {
  color: white;
}

.app .input {
  display: contents;
  justify-content: center;
  align-items: center;
  
 
}

.app .input {
  margin-top: 0.8em;
  width: 80em;
  height: 3em;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  padding: 5px;
 
  

 
}

.app .input input {
  width: 100%;
  height: 1.6em;
  border-color: transparent;
  outline-color: transparent;
  
}

.app i {
  cursor: pointer;
  font-size: larger;
  font-weight: 900;
  color: grey;
  margin-right: 5px;
}
.app .todos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.app .todos .todo {
  margin-top: 0.8em;
  width: 80em;
  height: 3em;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  padding: 5px;
}
.app .todos .todo .left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.app .todos .todo .left  {
  margin-left: 3px;
  font-size: medium;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  color: grey;
}
.mainHeading{
  font-family: 'Roboto', sans-serif;
  color: white;
}
.subHeading{
  font-family: 'Roboto', sans-serif;
}
.finished{
  font-family: 'Roboto', sans-serif;
  margin-top: 25px;
}
input:focus, textarea:focus {
  outline: none;
}
input[type="text"]{
  font-family: 'Roboto', sans-serif;
  font-size:15px;
}
.todoName {
  margin-left: 0.7em;
  margin-top: 1em;
}
.navbar{
  height: 48px;
  background-color: rgb(0, 96, 172);
  width: 85.4em;
  position: fixed;
  z-index: 1;
  margin-top: 0em;
  margin-left: 0em;
  margin-right: 0em;
  
}
.bodyoftodo{
  position: fixed;
}
.titletodo{
  font-weight: 600;
    font-family: SegoeUI-SemiBold-final,Segoe UI Semibold,SegoeUI-Regular-final,Segoe UI,"Segoe UI Web (West European)",Segoe,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,Tahoma,Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 30px;
    margin: 1em;
    padding: 1em;
  }
.linktitle{
  text-decoration:none;
  color: white;
}
.linktitle:hover {
  color:white;
}
.input{
  margin-left: 2.5em;
}

Thanks 😊