How to send URL Query in react js?

Question

Menu Code

<div>
{(ChannelName).map((val, index) => {
    return (
        <div className="TextLink" key={index}>
            <NavLink to={`/` + val}
                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>

2 components table API

const { id } = useParams()

const getData = () => {
  axios
    .get(`${API_ENDPOINT}/api/getPlaylist?RDL=${id}`, {
      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])
    })
    .catch((error) => {
      console.log("Error In GET Data", error)
    })
}

App.js

<Route path={`:id`} element={< Table />} />

When I click the menu text as shown in the image it returns undefined in ID {table code}. I am using useParams. I want, when I click the menu text, to attach with the api URL Query. But when I click, it's returning null and when i rewrite the URL like localhost300/hello then it returns /api/getPlaylist?RDL=hello How can I fix that ?

when click it's send me localhost:3000/BUSINESS%20NEWS%201/17/2022%2020:00 but in backend it localhost:3000/undefined.

please help.