What is the correct way to do animations when removing something from the DOM?

It seems like no matter what I do, when I remove something form the dom, it doesn’t trigger a re render until the items are removed and then it snaps away out of view instead of transitioning before it removes the data. Here is an example of something I’ve tried.

  const [isExpanded, setIsExpanded] = useState(false);
  const [isVisible, setIsVisible] = useState(false);

  const toggleReplies = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

    if (isExpanded) {
      setIsVisible(false);
      setTimeout(() => {
        setIsExpanded(false);
      }, 300); // Match the duration of the transition
    } else {
      setIsExpanded(true);
      setIsVisible(true);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Toggle Replies" onPress={toggleReplies} />
      {isVisible && (
        <View style={styles.replyBox}>
          <Text>This is a reply!</Text>
        </View>
      )}
    </View>
  );
};