I'm actually facing an issue where the setQuery is updating on the second click whereas the selected is updating instantly. I tried to use the prevState idea but still the issue persists.

interface queryProps {
  intensity: string;
  categoryId: string;
  coachId: string;
  minDuration: number;
  maxDuration: number;
}

const Filter=()=>{
const [selected, setSelected] = useState<any>(undefined);
const [query, setQuery] = useState<queryProps>({
    intensity: '',
    categoryId: '',
    coachId: '',
    minDuration: 0,
    maxDuration: 1000,
  });

useEffect(() => {
    setQuery(prev => ({
      ...prev,
      intensity: selected?.intensity || prev.intensity,
      categoryId: selected?.categoryId || prev.categoryId,
      coachId: selected?.coachId || prev.coachId,
      minDuration: selected?.minDuration || prev.minDuration,
      maxDuration: selected?.maxDuration || prev.maxDuration,
    }));
    console.log('selected ', selected);
    console.log('query ', query);
  }, [selected]);

return(
<>
 <Dropdown
          label="Intensity"
          data={intensityItem}
          onSelect={setSelected}
        />

</>
)

}