У меня есть проект, в котором сверху находится navbar и аудиоплеер,в навбаре есть 3 ссылки одна из которых ведет на страницу со списком песен, проблема заключается в том, что аудиоплеер сделан как отдельный функциональный компонент и рендерится в навбаре, но мне нужно при нажатии на одну из песен, которые находятся в другом функциональном компоненте, передавать в аудиоплеер объект метаданных песни, вопрос в том как это сделать? я не могу импортировать и вставить аудиоплеер для того чтобы передать значения с помощью props, потому что он уже есть в навбаре
код навбара
import React from 'react'
import './Navbar.css'
import { Nav } from 'react-bootstrap';
import { NavLink } from 'react-router-dom'
import { AudioPlayer } from './AudioPlayer';
const Navbar: React.FC = () => {
return (
<>
<Nav activeKey="/home" >
<Nav.Item >
<Nav.Link eventKey="link-1" ><NavLink to='/'>Квесты</NavLink></Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2" ><NavLink to='/photos'>Фотографии</NavLink></Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-3"><NavLink to='/music'>Музыка</NavLink></Nav.Link>
</Nav.Item>
<AudioPlayer />
</Nav>
</>
)
}
export default Navbar
код самого плеера
import React, { useState } from 'react'
import ReactAudioPlayer from 'react-audio-player';
export const AudioPlayer: React.FC = () => {
return (
<ReactAudioPlayer
// src="https://firebasestorage.googleapis.com/v0/b/multitask-510cc.appspot.com/o/music%2F6.DSCHINGHIS%20KHAN%20%20-%20MOSCAU.mp3?alt=media&token=ce8f8066-c101-4a75-a98f-e1858bc3a07a"
autoPlay={true}
controls
id='audioPlayer'
/>
)
}