I have been trying to re-render a contact list inside a Carousel by changing the state object in the parent class. The first time the Cards are rendered just fine - but when I try to add a new contact and update the state object, the child wont render again.

I have confirmed that the state object is updated correctly (logged inside useEffect hook at the parent component).

I am using @trendyol-js/react-carousel component below.

          const [contacts, setContacts] = React.useState([...contactArrayFromDB]);

          <Carousel
            className="carosusel"
            {...settings}
            rightArrow={
              <ArrowForwardIcon
                className="rightArrow"
                sx={{ color: styles.color.green }}
              />
            }
            leftArrow={
              <ArrowBackIcon
                className="backArrow"
                sx={{ color: styles.color.green }}
              />
            }
          >
            {**contacts.map**((item, index) => (
              <span>
                {console.log("rendering card .." + index)}
                <ContactCard
                  key={item.id}
                  item={item}
                  styles={styles}
                  isEditContacts={true}
                />
              </span>
            ))}
          </Carousel>

When I update the state, the log "rendering card .." is displayed on the console which means, the map function executes correctly everytime the state is updated.

I followed all the solutions on SO that I could find:

1. Passed the entire state object inside the key property of the child . It didn't work! I even passed a random number through item.id that I am passing to the key parameter now.
2. Used a state object inside the Child. Makes no difference.
3. When changing the state object at the parent, I made sure I clone it instead of directly changing the array elements. Still didn't work.

I couldn't find any solution to it. React experts, please suggest how I may fix this problem.