Can’t make div to animates smoothly to previous height with React’s FramerMotion

I’ve managed to animate expanding .project-card div when useState changes to true and .project-details appears. I have a problem with animating it to previous height when isActive changes to false and .project-card collapse immediatelly.

Appreciate all help and suggestions.

import '../styles/project.css';
import { useState, useTransition } from 'react';
import { motion } from 'framer-motion';
import { MdOutlineArrowForwardIos } from 'react-icons/md';

function Project(project) {
  const { index } = project;
  const [isActive, setIsActive] = useState(false);
  const handleClick = () => {
    setIsActive((current) => !current);
  };
  return (
    <motion.div
      key={project.id}
      className='project-card'
      initial={{ opacity: 0, y: 300, height: '57px' }}
      animate={{ opacity: 1, y: 0, height: isActive ? 'auto' : '57px' }}
      exit={{ opacity: 0, y: 300 }}
      transition={{ duration: 0.9, delay: index * 0.2, ease: 'backInOut'  }}>
  
      <div className='project-card-top'>
        <div className='project-title'>
          <div>
            <MdOutlineArrowForwardIos
              onClick={handleClick}
              className='project arrow'
              style={{
                transform: isActive ? 'rotate(0)' : '',
              }}
            />
            <h3 class='blue'>{project.name}</h3>
          </div>

          <div className='project-techs'>
            {project.technology.map((title) => {
              return (
                <div
                  key={title}
                  className='tech-img'>
                  <img src={`./assets/icons/${title}`} />
                </div>
              );
            })}

            {project.commercial ? (
              <div>
                <p className='project-tech commercial'>Commercial</p>
              </div>
            ) : null}
          </div>
        </div>
        {isActive && (
          <motion.div
            initial={{ opacity: 0}}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{
              duration: 0.3,
              delay: 0.5,
              ease: 'backInOut',
            }}
            className='project-details'>
            <div className='project-description'>{project.description}</div>
          </motion.div>
        )}
      </div>

    </motion.div>
  );
}
export default Project;

I’ve tried with GPT some options inluding :

declaring height style and

transition={{ 
  duration: 0.3,
  height: {
    duration: 0.3,
    ease: 'easeOut'
  }
}}