Реакция изменения состояния запускает переход

Question

У меня есть следующий компонент реагирования

export interface IDivBodyVisible {
    isVisible: string;
}

export default class NavDropDownItem extends React.Component<{ItemContent: string}, IDivBodyVisible> {

constructor(props: any) {
    super(props);

    this.state = { 
        isVisible: 'none' 
    }
}


render() {
         return (
            <div className="divBox" >
                <div className="divHeader" onClick={this.SwitchVisibility}>
                    <Icon className="icon"  iconName="ChevronDown"/>
                    {this.props.ItemContent}
                </div>
                {
                    this.state.isVisible !== 'block' ? null :
                <div className="divBody">
                    <ul className="ItemList">
                        <li>
                            <a className="miau" title="item1" onClick={this.ConsoleLog}>Item 1</a>
                        </li>
                        <li>
                            <a title="item2" onClick={this.ConsoleLog}>Item 2</a>
                        </li>
                        <li>
                            <a title="item3" onClick={this.ConsoleLog}>Item 3</a>
                        </li>
                    </ul>
                </div>
                }
            </div>
         )
}


private ConsoleLog = () : void => {
    console.log("Test");
}

private SwitchVisibility = (): void => {
    this.setState({
        isVisible : this.state.isVisible === 'none' ? 'block' : 'none'
    });
 }
}

В тот момент, когда я нажимаю на иконку, тело мгновенно появляется. Вместо этого я хочу, чтобы тело было очень гладким. Я уже пытался дать .divBox облегчение перехода 0,2, но это ничего не сделало.

Есть какой-нибудь совет, что я могу попробовать?