Making a JSX syntax for a MockComponent and have it typed with typescript

Wondering if anybody has some good suggestions on how to crack this. Got this test helper utils I have added some types to:

import { jest } from '@jest/globals'
import React from 'react'

// https://learn.reactnativeschool.com/courses/781007/lectures/14173979
export function mockComponent(moduleName: string, propOverrideFn = (props: Record<string, any>) => ({})) {
  const RealComponent = jest.requireActual(moduleName) as React.ComponentType<any>
  const CustomizedComponent = (props: Record<string, any>) => {
    return React.createElement(
      'CustomizedComponent',
      {
        ...props,
        ...propOverrideFn(props),
      },
      props.children
    )
  }
  CustomizedComponent.propTypes = RealComponent.propTypes

  return CustomizedComponent
}

So currently I can call it like this

jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
  return mockComponent('react-native/Libraries/Components/Touchable/TouchableOpacity', (props) => {
    return {
      onPress: props.disabled ? () => {} : props.onPress
    }
  })
})

But I would like to be able to call it more like

jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
  return <MockComponent 
          module='TouchableOpacity' 
          onPress={props => props.disabled ? () => {} : props.onPress}
         />
})

or

jest.mock('react-native/Libraries/Components/Touchable/TouchableOpacity', () => {
 return <MockComponent 
          module='TouchableOpacity'
          propOverride={props => ({onPress: props.disabled ? () => {} : props.onPress, ...props})}
        />
})