How to Display Images on a Surface Using ExoPlayer in Android

I am using version 1.4.1 of media3.exoplayer, and I want to use ExoPlayer to display images. I found that images are listed as supported media types, but when I followed the code in the documentation, the image is not displayed correctly. I have not been able to find relevant help online or from AI. Below is the code I have written:

class ImagePlayerActivity : ComponentActivity() {
    val TAG = "ImagePlayerActivity"

    @OptIn(UnstableApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val exoPlayer = ExoPlayer.Builder(this).setRenderersFactory(
            object : DefaultRenderersFactory(this) {

            }).build()
        exoPlayer.addListener(playerListener)
        setContent {
            ExoplayerdiydemoTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    SurfaceViewCompose(exoPlayer)
                }
            }
        }

        Log.d(TAG, "onCreate:")
    }


    @Composable
    fun SurfaceViewCompose(player: ExoPlayer) {
        val context = LocalContext.current
        val surfaceView = remember { SurfaceView(context) }

        DisposableEffect(surfaceView) {
            val surfaceHolderCallback = object : SurfaceHolder.Callback {
                @OptIn(UnstableApi::class)
                override fun surfaceCreated(holder: SurfaceHolder) {
                    player.setVideoSurface(holder.surface)
                    Log.d(TAG, "surfaceCreated: exoplay surfaceCreated")

                    val mediaItem =
                        MediaItem.Builder()
                            .setUri(Uri.parse("android.resource://" + packageName + "/" + R.raw.textimage))
                            .setMimeType(IMAGE_JPEG).setImageDurationMs(60*1000L).build()

                    val dataSourceFactory = DefaultDataSource.Factory(context)
                    val mediaSource = ProgressiveMediaSource.Factory(dataSourceFactory)
                        .createMediaSource(mediaItem)


                    player.setMediaSource(mediaSource)
                    player.prepare()
                    player.play()
                }

                override fun surfaceChanged(
                    holder: SurfaceHolder,
                    format: Int,
                    width: Int,
                    height: Int
                ) {
//                    player.setVideoSurface(holder.surface)
                    Log.d(TAG, "surfaceChanged: exoplay surfaceChanged")
                }

                override fun surfaceDestroyed(holder: SurfaceHolder) {
                    player.clearVideoSurface()
                    player.release()
                    Log.d(TAG, "surfaceDestroyed: exoplay release")
                }
            }

            surfaceView.holder.addCallback(surfaceHolderCallback)

            onDispose {
                surfaceView.holder.removeCallback(surfaceHolderCallback)
                player.clearVideoSurface()
            }
        }

        AndroidView(
            factory = { surfaceView },
            modifier = Modifier.fillMaxSize()
        )
    }


    private val playerListener = object : Player.Listener {
        override fun onPlaybackStateChanged(playbackState: Int) {
            Log.d(TAG, "onPlaybackStateChanged: $playbackState")
        }

        override fun onPlayerError(error: PlaybackException) {
            Log.d(TAG, "onPlayerError: error code ${error.errorCode} message ${error.message}")
        }
    }
}

Under the same code, both video and audio play normally, but I need to display images. Not only that, but I also plan to extend ExoPlayer to support GIF playback once image support is working.