How to show already checked items on top in reactjs

Here I have a array of emails and checked emails in object, on the basis of that I am showing checked emails in list. My question is How can we show checked emails on top on the basis of emails which I have in object.

e.g:

checkedEmails = {"demo1@yopmail.com": true,"demo4@yopmail.com": true,"demo5@yopmail.com": true}

and list of emails emails = [{"name": "demo1","email":"demo1@yopmail.com"},{"name": "demo3","email":"demo3@yopmail.com"}, {"name": "demo5","email":"demo5@yopmail.com"}, {"name": "demo2","email":"demo2@yopmail.com"}, {"name": "demo1","email":"demo1@yopmail.com"}, {"name": "demo6","email":"demo6@yopmail.com"}]

<div className="form-check">
  {
   emails && emails.length > 0 && emails.map((item, key) => {
     return (
         <div className="myr-list" key={key}>
         <input className="form-check-input" type="checkbox" checked={checkedEmails[item.email] ? true : false} name={item.email} onChange={props.onInputChange}/>
         <label className="form-check-label">
             {item.name}{" "}
         </label>
         </div>
      )
   })
 }
</div>

currently I am showing checked list by using above code but the problem is I am unable to sort or show already checked emails on top. Can anyone know how can we achieve this in Reactjs. I have gone through this vanilla js answer but it doesn't fit in my case. Any help will be appreciated.Thanks