how to send the url parameter query in react?

Question

code:-

   <div>
                    {ChannelName.map((val, index) => {
                        return (
                            <div className="TextLink" key={index}>
                                <NavLink to={`/`}
                                    onClick={(e) => myClick(val, index)} >
                                    <button className='notActive buttonLeft'
                                        onClick={() => { handleOnClick(index); handleClick(val, index); setPage("Table") }} // pass the index                                       
                                        className={activeIndex === index ? "active" : "notActive"}>
                                        {val}
                                    </button>
                                </NavLink>
                            </div>
                        )
                    })
                    }
                </div>
{page === "Table" ? <Table val={getname}/> : null}

2 component table url:-

const userId = props.val;
   useEffect(() => {
        setInterval(() => {
            getData();
        }, 300);

    }, [userId]);

     const getData = () => {
            console.log(`inside${userId}`);
            axios.get(`${API_ENDPOINT}/api/getPlaylist?RDL=${menuId}`,            {
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'Access-control-allow-origin': '*'
                    },
                    auth: {
                        username: 'admin',
                        password: 'password'
                    }
                }).then(response => {
                    setIsLoading(true);
                    setPlaylistData(response.data.Clips);
                    setChannel([(response.data.Players)]);
                    // console.log("table", response.data.Clips);
                    //console.log([...Object.values(response.data.Players).flat()]);
                }).catch(error => {
                    console.log("Error In GET Data", error);
                });

I want when I click the menu then menu URL parameters goes to the menuId and then the api show according then

Right now i am props the the onclick name and when i click on the second button its show me new api and 1 menu api how can i fix that?