How to change the checked property in a checkbox? - html

Question

I have a state called ListItems and I wish to display them as checked if the value is present in another state array called filteredListItems. I have created a callback function but this doesn't seem to work. How do I go on about this?
import React, {useState, useRef} from 'react'
import { connect, useDispatch, useSelector, useStore} from 'react-redux';
import { setEnable} from "../actions";
import './Settings.css'
function Settings(props){
const dispatch=useDispatch();
const [listItems,setListItems]=useState(props.defaultenableVal);
const [filteredListItems,setFilteredListItems]=useState(props.defaultenableVal);
const dragItem = React.useRef();
const dragOverItem = React.useRef();
const handleSort=()=>{
let _listItems=[...listItems];
const draggedItemContent=_listItems.splice(dragItem.current,1)[0];
_listItems.splice(dragOverItem.current,0, draggedItemContent);
dragItem.current=null;
dragOverItem.current=null;
setListItems(_listItems);
}
return(
<div className='container'>
<h3>Dimensions and Metrics</h3>
{
listItems.map((item,index)=>{
return (
<div
key={index}
draggable
onDragStart={(e)=>dragItem.current=index}
onDragEnter={(e)=>dragOverItem.current=index}
onDragEnd={handleSort}
onDragOver={(e)=>e.preventDefault()} >
<input id={index} name={item} type='checkbox'
checked={(()=>{
if(filteredListItems.includes(item)){
return true
}
else{
return false
}
})} />
<label htmlFor={index} >{item}</label>
</div>
)
})
}
</div>
)
}
export default Settings;
The value of props.defaultEnableVal is ['Clicks', 'AD Requests', 'AD Responses', 'Impressions', 'Revenue', 'Fill Rate', 'CTR'].
The check does not appear on the checkbox and it doesn't seem to be accepting check input when I click on it.