I'm trying to make a sorting visualizer in react and i was wondering what the best way to implement the animation for each sort would be as I'm quite new to that.

import './App.css';
import React, { useEffect, useState } from "react"

function App() {
  const[arr, setArr] = useState([])
  const[size, setSize] = useState(20)


  useEffect(() => {
      const randomArray = Array.from({ length: size }, () => 
        Math.floor(Math.random() * (300 - 1) + 1)
      )
      setArr(randomArray)
  }, [size])

  console.log(arr)
  

  return (
    <div className='container'> 
    <div className='bars'>
      {arr.map((bar, idx) => {
        return <div key={idx} className="bar" style={{ height: `${bar}px`, backgroundColor: "red" }}></div>
      })}
    </div>
    </div>
  );
}

export default App;