Show Json Value Consecutively with Material-UI Transition

I have an array of json that comes from the API.

"fruits": [
    {
      "id": "1",
      "fruit": "APPLE",
    },
    {
      "id": "2",
      "fruit": "BANANA",
    },
    {
      "id": "3",
      "fruit": "CHERRY",
    },
    {
      "id": "4",
      "fruit": "GRAPE",
    }
  ]

I want to show the fruits consecutively with Material-UI Fade transition.

First fruit should appear, then it should disappear, afterwards, next fruit should appear and disappear. When all fruits have been shown, it should start from the beginning.

How can I achieve this?

Something like this:

{fruit && fruit.map((item) =>(
  <Fade in={x} >
    <div className={styles.fruitContainer}>
      <p className={styles.fruitName}>{item.fruit}</p>
    </div>
  </Fade>
))}

P.S.: Fruit amount(object amount) could vary.

Answer

import React from "react";
import Fade from "@material-ui/core/Fade";

export default function SimpleFade() {
  const [id, setId] = React.useState(1);

  const data = {
    fruits: [
      {
        id: "1",
        fruit: "APPLE"
      },
      {
        id: "2",
        fruit: "BANANA"
      },
      {
        id: "3",
        fruit: "CHERRY"
      },
      {
        id: "4",
        fruit: "GRAPE"
      }
    ]
  };

  React.useEffect(() => {
    const interval = setInterval(() => {
      setId((prevId) => (prevId < data.fruits.length ? prevId + 1 : 1));
    }, 1000);
    return () => clearInterval(interval);
  }, [data.fruits.length]);

  return (
    <div>
      {data.fruits.map((fruit) => (
        <Fade in={parseInt(fruit.id, 10) === id} key={`fader_${fruit.id}`}>
          <p>{fruit.fruit}</p>
        </Fade>
      ))}
    </div>
  );
}

https://codesandbox.io/s/material-demo-forked-m2xvg?file=/demo.js

Something like this? Styling is required if they need to be in the same place.