React CSS transition not working - reactjs

Question

I have a tic tac toe board, and want to add a transition an element on a click.
For demo, I have a board with some cells filled. On click on the board, a new cell is filled. I wanted this new cell to come with a transition.
I have followed the React Transition Group doc. On click on any cell of the board, a circle appears on 2rd row 3rd col. This should appear with a Fade-in transition. I have added CSSTransition group, but transition is not happening. Something is amiss.
Following is the codesandbox:
Some sample code from the snippet
tic-tac-toe-board.js
import React from "react";
import "./tictactoe.css";
import { CSSTransition } from 'react-transition-group';
const Fade = ({ children, ...props }) => (
<CSSTransition {...props} timeout={1000} classNames="fade">
{children}
</CSSTransition>
);
class TicTacToeBoard extends React.Component {
constructor(props) {
super(props);
this.state = {
board: [
[0, 1, 0],
[2, 0, 0],
[0, 0, 0]
]
};
}
handleBoardClick = () => {
let newBoard = [
[...this.state.board[0]],
[...this.state.board[1]],
[...this.state.board[2]]
];
newBoard[1][2] = 1;
this.setState({board: newBoard});
}
render() {
return (
<div className="board" onClick={this.handleBoardClick}>
{this.state.board.map((row, rowIndex) =>
row.map((cell, colIndex) => {
return (
<div className="cell" key={`${rowIndex}-${colIndex}`}>
{cell === 1 && (
<Fade in={true}>
<img
src="https://image.ibb.co/nDDDuw/circle_outline.png"
alt=""
className="cell-content"
/>
</Fade>
)}
{cell === 2 && (
<Fade in={true}>
<img
src="https://image.ibb.co/jY0nMb/close.png"
alt=""
className="cell-content"
/>
</Fade>
)}
</div>
);
})
)}
</div>
);
}
}
export default TicTacToeBoard;
tictactoe.css
* {
box-sizing: border-box;
}
.board {
width: 90vmin;
height: 90vmin;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px #aaa;
}
.cell {
width: 30vmin;
height: 30vmin;
border: 1px solid lightgrey;
}
.cell-content {
width: 80%;
height: 80%;
margin: 10%;
}
.fade-enter {
opacity: 0.01;
}
.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 1000ms ease-in;
}

Answer 1

I had a similar issue but solved when I enclosed the CSSTransition inside the TransitionGroup
const Fade = ({ children, ...props }) => (
<TransitionGroup>
<CSSTransition {...props} timeout={1000} classNames="fade">
{children}
</CSSTransition>
</TransitionGroup>);
And update the style something like this
.fade-enter {
opacity: 0.01;
}
.fade-enter-active {
opacity: 1;
transition: opacity 1000ms ease-in;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0.01;
transition: opacity 1s ease-out;
}