Is there a way to select and show a specific element of a sidebar on React?

Question

I'm developing a video chat app with React, and I need to select a specific user in a sidebar in order to show its name.

How can I implement it?

import React, {useContext,useEffect, useState } from 'react';
import { SocketContext } from '../Contexts/SocketContext';
import axios from 'axios';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import * as Constants from '../Constants';

let users = []
axios.get(Constants.GET_ALL_USERS).then(res => { users = res.data; })

const SideList = () => {
const [idToCall, setIdToCall] = useState('');

return (
<List>
    {
        users.map(function(item, i){
          console.log('test');
          return(
              <ListItem>
                <ListItemAvatar>
                  <Avatar>{ item.username.toUpperCase().charAt(0) }</Avatar>
                </ListItemAvatar>
                <ListItemText
                  primary = { item.username }
                />
              </ListItem>
          );
        })
    }
</List>
);
};

export default SideList;