Как прокинуть Key=Id в другой компонент в запрос

Всем привет,ребят есть вопос.

Есть два компонента в них используется MaterialUi

UserList - на этом компоненте происходит запрос на API и получает список id,username пользователя и с помощью мапы рисует лист cо всеми пользователями.

NotesUser - компонент в котором происходит запрос к API и выводит так же с помощью мапы id,createDate,updateDate,title,content заметки текущего пользователя .

Проблема в том как мне передать с первого компонента id пользователя в другой компонент в запрос,а именно в ссылку

 https://elepsio.herokuapp.com/admin/users/  ID   ?offset=0&count=2&query=34&orderBy=asc

Что бы при при клике на юзера происходил редирект и в нем передавался ID пользователя с первого компонента во втором компонент что бы был подставлен этот ID Пробовал передавать через роут,но не смог,ниже приведу часть основного кода.

Код компонента UserList.js

const authToken = Cookies.get("_auth_t");
axios.interceptors.request.use((config) => {
  config.headers.authorization = `Bearer ${authToken}`;
  return config;
});

  const [users, setUsers] = React.useState([]);
  const [requestError, setRequestError] = React.useState();

  //Use effect for call fetchData
  useEffect(() => {
    fetchData();
  }, [1]);

  //Fetch list-users
  const fetchData = React.useCallback(async () => {
    try {
      const result = await axios.get(
        `https://elepsio.herokuapp.com/admin/users?offset=0&count=5&query=34&orderBy=asc`
      );
      // console.log(result);
      setUsers(result.data.docs);
    } catch (err) {
      setRequestError(err.message);
    }
  });

                <Paper className={fixedHeightPaper}>
                  <Typography
                    component="p"
                    variant="h6"
                    color="secondary"
                    noWrap
                  >
                    Cписок пациентов
                  </Typography>

                  <Divider />
                  <List>
                    {users?.map((user) => {
                      return (
                        <ListItemLink href="/notes-user">
                          {" "}
                          <ListItemText
                            key={user._id}
                            primary={user.username}
                          />
                        </ListItemLink>
                      );
                    })}
                  </List>
                </Paper>

Код компонента NotesUser.js

const [users, setUsers] = React.useState([]);
  const [requestError, setRequestError] = React.useState();

  //Use effect for call fetchData
  useEffect(() => {
    fetchData();
  },[1]);

  //Fetch list-users
  const fetchData = React.useCallback(async () => {
    try {
      const result = await axios.get(
        `https://elepsio.herokuapp.com/admin/users/5f6f3e26159e920017bed3ea?offset=0&count=2&query=34&orderBy=asc`
      );
      // console.log(result);
      setUsers(result.data);
    } catch (err) {
      setRequestError(err.message);
    }
  });

                <Paper className={fixedHeightPaper}>
                  {users?.map((user) => {
                    return (
                      <Card style={{ marginBottom: "20px" }}>
                        <CardContent>
                          <Typography
                            className={classes.title}
                            color="textSecondary"
                            gutterBottom
                          >
                            Дата создания: {user.createDate}
                          </Typography>
                          <Typography
                            className={classes.title}
                            color="textSecondary"
                            gutterBottom
                          >
                            Обновлено: {user.updateDate}
                          </Typography>

                          <Typography variant="h5" component="h2">
                            {user.title}
                          </Typography>

                          <Typography
                            variant="body2"
                            color="textSecondary"
                            component="p"
                          >
                            {user.content}
                          </Typography>
                        </CardContent>
                      </Card>
                    );
                  })}
                </Paper>