How can I load data in my select number two?

I have a select that loads the information from my api without problems but I need to do the same with my other select that comes with react-windowed-select but I have not succeeded since this type of select allows me to load large lists and renders better On the other hand, the normal select of react when fetching large lists becomes very slow.

normal select working:
https://codesandbox.io/s/quizzical-jasper-6j6rvl?file=/src/App.js:0-1019

import React, { useState, useEffect } from "react";

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      const getcountry2 = async () => {
        const req = await fetch(
          `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
        );
        const getres2 = await req.json();
        setUniversidad(await getres2);
      };
      getcountry2();
    }, 2000);
    return () => setInterval(interval);
  }, []);

  return (
    <div className="App">
      <select
        // name="t4"
        className="form-select"
      >
        <option>--Seleccione --</option>
        {t4t.map((getcon2) => (
          <option key={getcon2.id} value={getcon2.name}>
            {" "}
            {getcon2.documento} - {getcon2.name}{" "}
          </option>
        ))}
      </select>

      <br />
      {/*  <input type="text"  value={getcon2.documento} />*/}
    </div>
  );
}

export default App;

This is my other select "react-windowed-select" in which I want it to do the same as the previous one, that is, to load the database from the api but I haven’t been able to do it.

https://codesandbox.io/s/loving-darkness-5844h6?file=/src/App.jsx:0-790

import React, { useState, useEffect } from "react";
import WindowedSelect from "react-windowed-select";

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      const getcountry2 = async () => {
        const req = await fetch(
          `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
        );
        const getres2 = await req.json();
        setUniversidad(await getres2);
      };
      getcountry2();
    }, 2000);
    return () => setInterval(interval);
  }, []);

  //opciones
  const options = [];

  return (
    <div>
      <div class="col-12">
        <br />

        <WindowedSelect options={options} />
      </div>
    </div>
  );
}
export default App;

>Solution :

You should transform the data to the shape that react-windowed-select library accepts. In your example:

import React, { useState, useEffect } from "react";
import WindowedSelect from "react-windowed-select";

function App() {
  const [t4t, setUniversidad] = useState([]);

  useEffect(() => {
    (async () => {
      const req = await fetch(
        `https://aliraweb.com/apiAlira2/cargar_empleados/nombre_trabajador.php?id_empresa_usuario=30`
      );
      const getres2 = await req.json();
      setUniversidad(await getres2);
    })();
  }, []);

  // Here is the transformation
  const options = t4t.map((item) => ({ label: item.name, value: item.id }));

  return (
    <div>
      <div class="col-12">
        <br />

        <WindowedSelect options={options} />
      </div>
    </div>
  );
}
export default App;