Framer-motion AnimatePresence - apply dynamic color change before fade begins

Question

I am trying to create a simple svg fade using framer-motion where the color updates dynamically before the component's fade begins. I'm using a React functional component and framer-motion. The fade-out works fine, the issue is that I want to change the color dynamically before the fade begins based on whether a user answered a question right or wrong.

import { AnimatePresence, motion } from "framer-motion";

export default function SVGFade(props) {
    const {
        in: inProp,
        children,
        onExited = () => console.log('exited! time for next question'),
        id,
        color,
    } = props;

console.log(color)
    return (
        <AnimatePresence
            mode={"wait"}
            onExitComplete={() => onExited()}
        >
            {inProp && (
                <motion.g
                    key={id}
                     initial={{ opacity: 0, fill: color }}
                     animate={{
                        opacity: 1,
                        fill: color,
                     }}
                    exit={{ opacity: 0, fill: color }}
                    transition={{ duration: 2 }}
                >
                    {children}
                </motion.g>
            )}
        </AnimatePresence>
    );
}

The fade happens correctly when the inProp is set to false, but the color (default is black, right is blue, wrong is red) in the component doesn't update on its way out, it retains the black color, even though the console.log(color) shows the color prop has updated to the correct color. Is there a way to get the to update the color before it begins to be removed?

Thanks in advance for any suggestions!