React doesnt update state immidiately after dropdown selected

I have some update state problems when the dropdown is selected.

The useEffect doesnt update the state immidiately when its selected.

I want my listngs array updated immidiately whenever the selected filter changes.

Thanks

Code

const dropdowns = [
    { icon: '', title: 'Top ratings', color: 'warning' },
    { icon: '', title: 'Worst ratings', color: 'warning' },
]
  
const [selectedFilter, setSelectedFilter] = useState("")
  useEffect(() => {
    if (selectedFilter === 0) {
      var sorted = listings.sort((a, b) => { return b.rating - a.rating })
      setListings(sorted)
      console.log(listings)
    } else {
      var sorted = listings.sort((a, b) => { return a.rating - b.rating })
      setListings(sorted)
      console.log(listings)
    }
  }, [selectedFilter])



<Dropdown.Menu className='w-100'>
     {dropdowns.map(({ icon, title }, indx) => (
      <Dropdown.Item
       key={indx}
       as='button'
       eventKey={title}
       onClick={() => {
       setSelectedFilter(indx)
       }}>
      <i className={`${icon} fs-lg opacity-60 me-2`}></i>
      {title}
      </Dropdown.Item>
      ))}
  </Dropdown.Menu>

You probably will find it useful to read through the "You might not need an effect", in particular the "Updating state based on props or state" section.

Ultimately you don't need an effect to compute derived data, you should just do that directly in render.

const dropdowns = [
    { icon: '', title: 'Top ratings', color: 'warning' },
    { icon: '', title: 'Worst ratings', color: 'warning' },
]

const [selectedFilter, setSelectedFilter] = useState("")

const sortedListings = selectedFilter === 0 ?
  [...listings].sort((a, b) => b.rating - a.rating) : 
  [...listings].sort((a, b) => a.rating - b.rating);

<Dropdown.Menu className='w-100'>
     {dropdowns.map(({ icon, title }, indx) => (
      <Dropdown.Item
       key={indx}
       as='button'
       eventKey={title}
       onClick={() => {
       setSelectedFilter(indx)
       }}>
      <i className={`${icon} fs-lg opacity-60 me-2`}></i>
      {title}
      </Dropdown.Item>
      ))}
  </Dropdown.Menu>

The other thing worth noting is in your useEffect you're mutating listings which is most likely not desirable; instead you should clone the array then sort (hence [...listings].sort() rather than listings.sort()).