I’m working on a React Native app and I’ve encountered a warning that I’m having trouble resolving. The warning message is:

Warning: TouchableHighlight is accessing findNodeHandle inside its render(). render() should be a pure function of props and state. It should never access something that requires stale data from the previous render, such as refs. Move this logic to componentDidMount and componentDidUpdate instead.
in TouchableHighlight (created by TouchableHighlight)

The warning indicates that TouchableHighlight is accessing findNodeHandle inside its render() method, and it suggests moving this logic to componentDidMount or componentDidUpdate. However, I am using functional components with React Hooks and would like to avoid the use of lifecycle methods like componentDidMount and componentDidUpdate.

How can I move the logic that uses findNodeHandle from the render phase to a different part of a functional component using hooks?
Is there a better way to handle such operations in React Native with functional components to avoid warnings?
I would greatly appreciate any suggestions or solutions to this issue using hooks. Thanks in advance for your help!

import React, {useState, useRef, forwardRef} from 'react';
import {TouchableHighlight, View} from 'react-native';

const FocusableHighlight = forwardRef((props, ref) => {
  const [focused, setFocused] = useState(false);
  const [pressed, setPressed] = useState(false);

  return (
    <TouchableHighlight
      {...props}
      ref={ref}
      delayLongPress={500}
      onLongPress={(event) => {
        console.log('long press: ' + props.nativeID)
        if (props.onLongPress) {

          props.onLongPress(event);
        }

      }}
      onPress={(event) => {


          setPressed(parseInt(event.eventKeyAction) === 0);
          if (props.onPress) {
            props.onPress(event);
          }
        
      }}
      onFocus={(event) => {
        console.log('focus: ' + props.nativeID);
        setFocused(true); 
        if (props.onFocus) {
          props.onFocus(event);
        }
      }}
      onBlur={(event) => {
        setFocused(false);
        if (props.onBlur) {
          props.onBlur(event);
        }
      }}
      style={[
        props.style,
        focused && {
          backgroundColor: props.underlayColor,
          opacity: props.activeOpacity,
        },
        focused && props.styleFocused,
        pressed && props.stylePressed,
      ]}>
      {props.children || <View />}
    </TouchableHighlight>
  );
});

export default FocusableHighlight;