Enemy.jsx

import { 
	Container,
	Graphics,
} from 'pixi.js'
import { useExtend } from '@pixi/react'

export default function Enemy() {
	useExtend({
		Container,
		Graphics,
	})

	return (
		<container>
			<graphics draw={() => {}}>
		</container>
	)
}

index.jsx

import { Application } from '@pixi/react'
import { lazy } from 'react'

const Enemy = lazy(() => import('./Enemy.js'))
const Player = lazy(() => import('./Player.js'))

export default function Game() {
	return (
		<Application>
			<Player />
		</Application>
	)
}

Player.jsx

import { 
	Container,
	Sprite,
	Text,
} from 'pixi.js'
import { 
	useAsset,
	useExtend,
} from '@pixi/react'
import { Suspense } from 'pixi.js'

export default function Player() {
	useExtend({
		Container,
		Sprite,
		Text,
	})

	const texture = useAsset({
		alias: 'player',
		src: '/images/player.png',
	})

	return (
		<container>
			<Suspense fallback={<pixiText text={'Loading Player Sprite...'} />}>
				<sprite texture={texture}>
			</Suspense>
		</container>
	)
}