Условный рендеринг, анимация

Как при условном рендеринге сделать анимацию?

import React, {useEffect, useState, CSSProperties, useContext} from "react";
import {ReactComponent as Arrow} from "../../img/icons/arroww.svg";
import style from './ui.module.css'

const ContextMenu = (props) => {
    const [open, setOpen] = useState(false)
    return (
        <div>
            <span onClick={() => {
                setOpen(true)
            }} className={style.context_menu}><Arrow/></span>
            {open ?
                <div className={style.main}>
                    <ul>
                        {props.items.map(function (value, key) {
                            return <li>
                                <p className={style.context_title}>{value.name}</p>
                            </li>
                        })}
                    </ul>
                </div>
            : ''}
        </div>
    );
}
export default ContextMenu