What is the best practice for unit testing my functional component with hooks in React Native?

I've written a simple wrapper component around ScrollView that enables/disables scrolling based on the available height it's given:

import React, {useCallback, useEffect, useRef, useState} from 'react';
import {Keyboard, ScrollView} from 'react-native';
import {deviceHeight} from '../../../platform';

export default function ScrollingForm({
  availableHeight = deviceHeight,
  children,
}) {
  const [scrollEnabled, setScrollEnabled] = useState(true);
  const [formHeight, setFormHeight] = useState(0);
  const scrollingForm = useRef(null);

  const checkScrollViewEnabled = useCallback(() => {
    setScrollEnabled(formHeight > availableHeight);
  }, [availableHeight, formHeight]);

  const onFormLayout = async event => {
    await setFormHeight(event.nativeEvent.layout.height);
    checkScrollViewEnabled();
  };

  useEffect(() => {
    Keyboard.addListener('keyboardDidHide', checkScrollViewEnabled);

    // cleanup function
    return () => {
      Keyboard.removeListener('keyboardDidHide', checkScrollViewEnabled);
    };
  }, [checkScrollViewEnabled]);

  return (
    <ScrollView
      ref={scrollingForm}
      testID="scrollingForm"
      keyboardDismissMode="on-drag"
      keyboardShouldPersistTaps="handled"
      scrollEnabled={scrollEnabled}
      onLayout={onFormLayout}
      onKeyboardDidShow={() => setScrollEnabled(true)}>
      {children}
    </ScrollView>
  );
}

I need to write unit tests for this component. So far I have:

import React from 'react';
import {Keyboard} from 'react-native';
import {render} from 'react-native-testing-library';
import {Text} from '../..';
import ScrollingForm from './ScrollingForm';

describe('ScrollingForm', () => {
  Keyboard.addListener = jest.fn();
  Keyboard.removeListener = jest.fn();

  let renderer;
  describe('keyboard listener', () => {
    it('renders text with default props', () => {
      renderer = render(
        <ScrollingForm>
          <Text>Hello World!</Text>
        </ScrollingForm>,
      );
      expect(Keyboard.addListener).toHaveBeenCalled();
    });

    it('should call listener.remove on unmount', () => {
      renderer = render(
        <ScrollingForm>
          <Text>Goodbye World!</Text>
        </ScrollingForm>,
      );
      renderer.unmount();
      expect(Keyboard.removeListener).toHaveBeenCalled();
    });
  });
});

I want to also confirm that on layout if the available height is greater than the form height, that scrollEnabled is correctly being set to false. I've tried something like this:

it('sets scrollEnabled to false onFormLayout width 1000 height', () => {
  mockHeight = 1000;
  const {getByTestId} = render(
    <ScrollingForm availableHeight={500}>
      <Text>Hello World!</Text>
    </ScrollingForm>,
  );
  const scrollingForm = getByTestId('scrollingForm');

  fireEvent(scrollingForm, 'onLayout', {
    nativeEvent: {layout: {height: mockHeight}},
  });
  expect(scrollingForm.props.scrollEnabled).toBe(false);
});