React uses Garbage Collector too much and slows down my app

I am building a app. and I came to a point where i need to render about 1000 complex components, one after another. Here is the code that does this:

function App() {

    var [records, setRecords] = useState([])
    
    useEffect(() => {
        
        fetch(api + sessionStorage.getItem("batch") +"/" + sessionStorage.getItem("page"))
        .then((response) => response.json())
        .then((data) => {
            setRecords(data);
        });
    } , [] )

    return (
        <div className="App">
            <PrimarySearchAppBar />
            <Toolbar />{" "}{/* removing this will cause an overlay between the first card and the AppBar */}
                {records.map((record) => {
                    return(
                        <RowCard
                            key={record.code}
                            str={record.str}
                            code={record.code}
                            translateButton={false}
                            saveButton={true}
                            val={record[languageCode]}
                        />
                    );                    
                })}
            <Footer/>
        </div>
    );
}


export default App;

The "records" variable holds an array with 1000 objects, with 4 fields for each object The problem is, when react tries to render these components, there is a big delay. After some debugging, i noticed that there is a big time gap between the "setRecords(data)" statement and the actual render of the components.

Later, i found out this:

And it goes on and on with the "Minor GC" things. The "Promise Callback" that's on the big yellow bar refers to my "setRecords(data)" statement.