useEffect warning while setState is used inside it

Add the dependency on dependencies array like this

const [data , setData] = useState({ 
 qualification : {},
 workingWith : {},
 annualIncome : {},
 professionArea : {}
})

useEffect(() => {
    const newData = {
     ...data,
     qualification : { ...data.qualification , options: handleOptionToData("Qualification") },
     workingWith : { ...data.workingWith , options: handleOptionToData("workingWith") },
     annualIncome : { ...data.annualIncome , options: handleOptionToData("annualIncome") },
     professionArea : { ...data.professionArea , options: handleOptionToData("Profession area") },
    }

    setData(newData)
    setOptionsData(true)
}, [qualification, workingWith , annualIncome , professionArea])

You can use this syntax to avoid dependency on the state,

useEffect(()=>{
  setState(prev=>*your logic*)
},[setState])

This way you can use prev to update new state and your state will no longer be a dependency of the useEffect and will not cause an infinite loop.