loop through a variable and add it to react state variable

I would like to iterate through an array and add the contents to a state variable as an object like so.

var interests = ['jumping', 'singing', 'dancing']   
const [dict, setDict] = useState({}) 

function onClickFunc(interests){
    for (var i=0; i<interests.length; i++){
        setDict({...dict, [interests[i]]: 'checked'})
    }

}

This code would return a dict value of {‘dancing’ : ‘checked}. I want it to return {‘jumping’ : ‘checked, ‘singing’ : ‘checked, ‘dancing’ : ‘checked}. I know this has something to do with setDict() being asynchronous but none of my solutions are working. Please help and Thanks.

>Solution :

You should just prepare dictionary first, and then set it’s value only once.

function onClickFunc(interests){
    const newDict = Object.fromEntries(interests.map(interest => [interest, "checked"])) 
    setDict(newDict);
}