React Native Animated.timing is delayed on second click

Question

I have a component which is supposed to contain a lot of children. By default it is supposed be relatively small in order to not take up too much screen space. If the user wants to see all children, he can click on the component and it will expand to reveal all the contained children components.

The first click for expanding the component works just fine, however the second click for shrinking is delayed by about half a second. This gives a bad user experience. How can I remove the delay?

This is my code:

import React, { useState, useRef } from 'react';
import { View, TouchableOpacity, Animated, StyleSheet } from 'react-native';

export function Container({ children, initHeight }) {
  const [isExpanded, setIsExpanded] = useState(false);
  const containerHeight = useRef(new Animated.Value(initHeight)).current;

  const toggleExpand = () => {
    const newHeight = isExpanded ? initHeight : 100000;
    setIsExpanded(!isExpanded);
    Animated.timing(containerHeight, {
      toValue: newHeight,
      duration: 500,
      useNativeDriver: false,
    }).start();
  };

  return (
    <TouchableOpacity onPress={toggleExpand}>
      <Animated.View style={[styles.container, { maxHeight: containerHeight }]}>
        <View style={{flexDirection: "row", flexWrap: "wrap"}}>
            {children}
        </View>
      </Animated.View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: "auto", 
    overflow: 'hidden',
  },
});