React doesn't render array

my React code doesn’t works.
I’ve an array, and, for each item, I need to render a card.
But it doesn’t works.
This is all the code:

const Home: NextPage = () => {
  const [servers, setServers] = useState({});

  async function getServers() {
    console.log('ready');

    const response = await fetch('http://localhost:3000/server/servers').then(
      (res) => res.json()
    );

    setServers(response);
    console.log(response);

    console.log('servers object updated: ' + JSON.stringify(servers));
  }

  useEffect(() => {
    getServers();
    import('bootstrap/dist/js/bootstrap');
    WebFont.load({
      google: {
        families: ['Karla:600', 'sans-serif'],
      },
    });
  }, []);

  useEffect(() => {
    console.log('servers object updated: ' + JSON.stringify(servers));
  }, [servers]);

  return (
    <div className="app">
      <div className="container">
        <div className="row" style={{ color: 'white' }}>
          {servers.database?.map((server, index) => (
            <div key={index} className="col">
              <div
                className="card"
                style={{
                  width: '18rem',
                  backgroundColor: '#101114',
                  color: 'white',
                  marginTop: '80px',
                  borderRadius: '15px',
                  boxShadow: '4px 3px 5px 0px #7335fb',
                }}
              >
                <img
                  src="https://cdn.discordapp.com/icons/843104500713127946/a_91371d39bec9e454d0f4ccacbfaea9f8.gif?size=512"
                  className="card-img-top"
                  alt="Icona server"
                  style={{
                    borderRadius: '50%',
                    width: '96px',
                    marginLeft: '20px',
                    marginTop: '60px',
                  }}
                />
                <div className="card-body">
                  <h5 className="card-title">
                    {servers.bot[index].name || 'Errore!'}
                  </h5>
                  <br />
                  <p className="card-text">{server.shortDescription}</p>
                  <br />
                  <a
                    href="#"
                    className="btn"
                    style={{ backgroundColor: '#5316d9', color: 'white' }}
                  >
                    Entra
                  </a>
                  <a
                    href="#"
                    className="btn"
                    style={{
                      marginLeft: '10px',
                      backgroundColor: '#5316d9',
                      color: 'white',
                    }}
                  >
                    Visita
                  </a>
                  <br />
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Home;

The problem is here:

servers.database?.map((server, index) => (
  <div key={index} className="col">
    <div
      className="card"
      style={{
        width: '18rem',
        backgroundColor: '#101114',
        color: 'white',
        marginTop: '80px',
        borderRadius: '15px',
        boxShadow: '4px 3px 5px 0px #7335fb',
      }}
    >
      <img
        src="https://cdn.discordapp.com/icons/843104500713127946/a_91371d39bec9e454d0f4ccacbfaea9f8.gif?size=512"
        className="card-img-top"
        alt="Icona server"
        style={{
          borderRadius: '50%',
          width: '96px',
          marginLeft: '20px',
          marginTop: '60px',
        }}
      />
      <div className="card-body">
        <h5 className="card-title">{servers.bot[index].name || 'Errore!'}</h5>
        <br />
        <p className="card-text">{server.shortDescription}</p>
        <br />
        <a
          href="#"
          className="btn"
          style={{ backgroundColor: '#5316d9', color: 'white' }}
        >
          Entra
        </a>
        <a
          href="#"
          className="btn"
          style={{
            marginLeft: '10px',
            backgroundColor: '#5316d9',
            color: 'white',
          }}
        >
          Visita
        </a>
        <br />
      </div>
    </div>
  </div>
));

Here the console output:

Someone know why it doesn’t works?
No error, all works fine, but he doesn’t load array.
VScode tell me that the initial useState value doesn’t contain necessary data, but it arrive from database after, so I don’t care.
If you have any suggestion/solution, please tell me.
Thanks in advance and sorry for bad English!

>Solution :

If you check your console.log("servers object updated: " + JSON.stringify(servers)); log you’ll see that it’s an object without a database property.

From what I can see of the logged state, the render should use the servers.servers property array to map:

{servers.servers?.map((server, index) => (
  <div key={index} className="col">
    <div className="card" style={{ width: "18rem", backgroundColor: "#101114", color: "white", marginTop: "80px", borderRadius: "15px", boxShadow: "4px 3px 5px 0px #7335fb" }}>
      <img src="https://cdn.discordapp.com/icons/843104500713127946/a_91371d39bec9e454d0f4ccacbfaea9f8.gif?size=512" className="card-img-top" alt="Icona server" style={{ borderRadius: "50%", width: "96px", marginLeft: "20px", marginTop: "60px" }} />
      <div className="card-body">
        <h5 className="card-title">{servers.bot[index].name || "Errore!"}</h5><br />
        <p className="card-text">{server.shortDescription}</p><br />
        <a href="#" className="btn" style={{ backgroundColor: "#5316d9", color: "white" }}>Entra</a>
        <a href="#" className="btn" style={{ marginLeft: "10px", backgroundColor: "#5316d9", color: "white" }}>Visita</a>
        <br />
      </div>
    </div>
  </div>
))}