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/14173979export 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})}        />})