Don't use axios, now JS has a better alternative called fetch. wrap call on a async function. finally destructor the data object. and void installing more things on your node_modules.

What's here ?

1. Request endpoint using callApi function

2. Collect only data from all json scope when finish promise.

3. Loop over each name

const myComponent = () => {
    const names = [];
    const callApi = async () => {
        await fetch('https://www.balldontlie.io/api/v1/teams')
        .then(r => r.json())
        .then(resp => { const { data } = resp; return data; })
        .catch(e => { console.log(e.message); });
    };
    callApi();

    return <>
        {names && names.length > 0
        ? <span>{names.map(({ id, name }) => <h1 key={id}>{name}</h1>)}</span>
        : <span>No rows </span>}
    </>;

According to your second block of code, you are trying to access a "data" property of a string, since you are mapping an array of keys of the items.

Effectively:

const item_keys = Object.keys(items);
//if the items is an array, item_keys = ["0","1",...]
//if items is an object, item_keys = ["id","name",...]
const result = item_keys.map(item => (
    <h1 key={item}>{item.data}</h1>
));
//either way, result is an array of <h1>undefined</h1>
//because item is a string

Assuming you defined items as const items = result.data.data (edited), you should be able to display names like this:

{items.map((item, index) => (
    <h1 key={index}>{item.name}</h1>
))}

const result = await Axios('https://www.balldontlie.io/api/v1/teams')
const data = result.data;

//if you want to display all names
{
    data.map(team => (
        <div>
            <h1 key={`${team.id}`}>{team.name}</h1>
        </div>
    )
}

//if you want to display all fields in each team
{
    data.map(team => (
        <div key={`${team.id}`}>
            {
                Object.keys(team).map((key, keyIndex) => (
                    <h1 key={`k-${team.id}-${keyIndex}`}>{team[`${key}`]}</h1>
                ))
            }
        </div>
    )
}

Your response is an array

// you need to change this 
Object.keys(items).map(item => (
        <h1 key={item}>{item.data}</h1>
))}
// to this where items = result.data.data
items.map(item => <h1 key={item.id}>{item.city} </h1> 
// to note here item.city need to be a string or number and not an objet
//if your data does not have an Id
items.map((item, index) => <h1 key={index}>{item.city} </h1> 

and in your code this will become somthing like this

return (
   <div>
     {items.map((item, index) => <h1 key={index}>{item.city} </h1>}
   </div>
)

Here an example how the complete code should looks, since you are seeing the response and data in console but not in the UI, it could be a state problem.

const App = () => {
  const [items, setItems] = useState([]);
  useEffect(()=>{
    fetch('https://www.balldontlie.io/api/v1/teams')
    .then(res => res.json())
    .then(res => {
        setItems(res.data);
    })
    .catch(error => { 
    //handle error here
    });
},[])
  return (
    <>
      {items.map(el => <h1 key={el.id}> el.city </h1>}
    </>
  )
}

As your data response is an array of objects and your requirement is to display attributes of that data, you can just run a simple loop on data and render items. Below "data" is the response from API

const data = [{"id":"1",name:"Team1"}, {"id":"2",name:"Team2"}]
   
data.map(item => 
   <div>
       <h1 key={id}>{item.name}</h1>
   </div>
);