How to alternate between three texts being displayed on the same place with transition-CodePudding

I have three rows with the component Typography. I want to show the first row, then alternate to the second, then the third, and then back to the first one.

They should be displayed on the same place, and only one at a time.

<Typography>Welcome.</Typography> 
<Typography>Willkommen.</Typography>  
<Typography>Bem-vindo.</Typography>

CodePudding user response：

const Which = () => {
  const [which, setWhich] = useState(1);

  useEffect(() => {
        setTimeout(() => {
            setWhich(state => (state < 3 ? state   1 : 1));
        }, 3000);
    }, []);

  return (
        <div>
            {
                which === 1 &&
                <div>Welcome</div>
            }
            {
                which === 2 &&
                <div>Willkommen</div>
            }
            {
                which === 3 &&
                 <div>Bem-vindo</div>
            }
        </div>
    );
}