CSS animation-duration issue, on state change animation becomes instantaneous - css

Question

I am encountering a problem where an animation that is set to run on click is happening instantly when it should have a delay, when I change the state from false to true manually I can see the transition working fine, however when implementing the onClick feature and clicking the element it does not have the animation-duration being applied.
does anyone know a work around or a best practise to getting this working?
Main.js
import React, { useState } from "react";
export default function Main() {
const [isToggled, setIsToggled] = useState(false)
function handleToggle() {
setIsToggled(!isToggled)
}
return (
<div className="menu"
onClick={handleToggle}
>
<img src={require("../resources/menu-dropdown.png")}
className={isToggled ? "menu--dropdown top--tile motion" : "menu--dropdown top--tile reverse--motion"}
/>
<img src={require("../resources/menu-dropdown.png")}
className={isToggled ? "menu--dropdown bottom--tile motion" : "menu--dropdown bottom--tile reverse--motion"}
/>
</div>
)
}
styles.css
.menu--dropdown {
width: 15%;
position: absolute;
}
.top--tile {
top: -10%;
right: -95%;
}
#keyframes top--motion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
transform-origin: 30% 70%;
}
}
.top--tile.motion {
animation-name: top--motion;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.top--tile.reverse--motion {
animation-direction: reverse;
animation-name: top--motion;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes bottom--motion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-45deg);
transform-origin: 40% 60%;
}
}
.bottom--tile {
top: -7.5%;
right: -95%;
}
.bottom--tile.motion {
animation-name: bottom--motion;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.bottom--tile.reverse--motion {
animation-direction: reverse;
animation-name: bottom--motion;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}