I want to have a burger icon and on onClick event it changes into ‘X’ icon.
But I cannot able to achieve smooth transition, Can someone help me?

React

import React, {useState} from 'react';
import '../Styles/BurgerIcon.css';

const BurgerIcon = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };
  return (
    <svg 
        xmlns="http://www.w3.org/2000/svg" 
        fill="none" 
        viewBox="0 0 24 24" 
        stroke-width="1.5" 
        stroke="currentColor"
        onClick={toggleMenu}
        class='burger_icon'
    >
        <path 
            className='burger_icon_path'
            stroke-linecap="round" 
            stroke-linejoin="round" 
            d={!isMenuOpen? "M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25":"M6 18 18 6M6 6l12 12"} 
        />
    </svg>
  )
};

export default BurgerIcon;

CSS

.burger_icon{
    transition: all 500ms ease;
}

.burger_icon_path{
    transition: d 500ms ease;
}

Thank you.