Rendering native mobile components mixed in with HTML (Capacitor) - reactjs

Question

I'm making a hybrid app with React and Capacitor and I need to render an iOS component (AVPlayerView) mixed in with my HTML. I was wondering if there's any way to create a capacitor plugin (e.g. PlayerPlugin) to handle this. Like:
return (
<div>
<img src="whatever" />
<PlayerPlugin height="300px" width="300px" />
<img src="whatever2" />
</div>
)
Or:
const player = PlayerPlugin({ height: '300px', width: '300px' })
return (
<div>
<img src="whatever" />
{player}
<img src="whatever2" />
</div>
)
And the player would automagically know to place itself between the images.
Alternatively, instead of having it mixed in with HTML, at least making it look like it is, by also passing the position, in addition to the dimensions.
For example:
const player = PlayerPlugin()
const playerRef = useRef(null)
useEffect(() => {
if (!playerRef.current) return
player.height = playerRef.current.offsetHeight
player.width = playerRef.current.offsetWidth
player.top = playerRef.current.offsetLeft
player.left = playerRef.current.offsetTop
player.visible = true
}, [playerRef.current])
return (
<div>
<img src="whatever" />
<div ref="playerRef" style={{ height: '300px', width: '300px' }} />
<img src="whatever2" />
</div>
)
Is it possible to do something like this?