React Native - Modalize Error: Warning: This synthetic event is reused for performance reasons

Question

I am programming with React Native. In a part of the app, I needed to use the Modalize library. I am facing an issue when opening the Modalize (react-native-modalize).

The code for the onOpen function to open the Modalize is this, along with passing the onOpen function to the component that will call this function:

const modalizeRef = useRef(null);

onOpen = () => {
  if (modalizeRef.current) {
    console.log('opened');
    modalizeRef.current.open();
  }
};

const renderItem = ({ item, index }) => (
  <View>
    <View style={{ height: index === 0 ? 0 : 0 }}/>
    <DebitItem item={item} onClickButton={onOpen}/>
    <View style={{ height: index === debits.length - 1 ? 20 : 0 }}/>
  </View>
);

The DebitItem component:

const DebitItem = ({ item, onClickButton }) => {
  const navigation = useNavigation();

  const debit = item;
  console.log('debit/item');
  console.log(debit);

  return (
    <TouchableOpacity onPress={() => navigation.navigate('NewDebitScreen', { debit })} style={styles.card}>
      <View style={styles.row}>
        <Text style={styles.descText}>{debit.description}</Text>
        {debit.paymentDate == null
          ? <PayButton onPress={onClickButton}/> 
          : <Image
              source={require('../../../assets/icons/check.png')}
              style={{ width: 20, height: 20 }}
            />} 
      </View>
      <View style={styles.row}>
        <Text style={styles.priceIndicatorText}>Debt Amount:</Text>
        <Text style={styles.priceText}>RS {debit.price}</Text>
      </View>
    </TouchableOpacity>
  );
};

The PayButton component, which is the button that should call the function to open the Modalize when pressed:

return (
  <TouchableOpacity style={styles.button} onPress={onPress}>
    <Text style={styles.text}>Pay</Text>
  </TouchableOpacity>
);

When clicking the button, the Modalize is opening and showing its content correctly. However, there is a warning, and when checking the terminal, the error and warning are as follows:

 ERROR  Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `nativeEvent` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information.
 WARN  Possible Unhandled Promise Rejection (id: 3):
TypeError: Cannot read property 'layout' of null
TypeError: Cannot read property 'layout' of null
    at handleModalizeContentLayout (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:230857:37)
    at ?anon_0_ (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:118844:33)
    at next (native)
    at asyncGeneratorStep (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:6052:26)
    at _next (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:6071:29)
    at tryCallOne (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/1i515cg5/x86_64/lib/InternalBytecode/InternalBytecode.js:53:16)
    at anonymous (/root/react-native/packages/react-native/ReactAndroid/hermes-engine/.cxx/Release/1i515cg5/x86_64/lib/InternalBytecode/InternalBytecode.js:139:27)
    at apply (native)
    at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:39559:26)
    at _callTimer (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:39438:17)
    at _callReactNativeMicrotasksPass (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:39483:17)
    at callReactNativeMicrotasks (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:39689:44)
    at __callReactNativeMicrotasks (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:3615:46)
    at anonymous (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:3389:45)
    at __guard (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:3588:15)
    at flushedQueue (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:3388:21)
    at callFunctionReturnFlushedQueue (http://10.0.2.2:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.vendinha&modulesOnly=false&runModule=true:3373:33)

How to solve this problem in my code?