Problem with not being able to access an id that is a child of the component from outside the component

My code is as below. It works when I create the videoOutput at the same level as the MediaPlayer and set the videoOutput id to the videoOutput variable of the MediaPlayer. But when I put VideoOutput in Component I can't access id in component from MediaPlayer. Since I will have more than one video source, I want to create multiple VideoOutput components, call them in different qmls and manage them both with a single MediaControlBar.

I tried property alias but still couldn't access it.

Item{
    id: kameraKaydi1
    property alias videoOutput : videoOutput

    Rectangle {
        id: kameraKaydi1Rectangle
        anchors.fill: parent
        color: "#0b2a3e"

        VideoOutput {
            id: videoOutput
            property bool fullScreen: false

            anchors.fill: parent

            TapHandler {
                onDoubleTapped: {
                    parent.fullScreen ?  showNormal() : showFullScreen()
                    parent.fullScreen = !parent.fullScreen
                }
                onTapped: {
                    metadataInfo.visible = false
                    audioTracksInfo.visible = false
                    videoTracksInfo.visible = false
                    subtitleTracksInfo.visible = false
                }
            }
        }
    }
}

MediaPlayer {
    id: mediaPlayer
    source: "/../Assets/Videos/kokpit_video.mp4"
    function updateMetadata() {
        metadataInfo.clear();
        metadataInfo.read(mediaPlayer.metaData);
        metadataInfo.read(mediaPlayer.audioTracks[mediaPlayer.activeAudioTrack]);
        metadataInfo.read(mediaPlayer.videoTracks[mediaPlayer.activeVideoTrack]);
    }

    videoOutput: kameraKaydi1.videoOutput
    audioOutput: AudioOutput {
        id: audio
        muted: playbackControl.muted
        volume: playbackControl.volume
    }
}