My first code renders the Feladat significantly slower than my 2nd code, why could that be?

My first code: ***

import React, { useEffect, useState, useCallback } from 'react';
import { Text, View, VirtualizedList, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { AntDesign as Icon } from '@expo/vector-icons';
import * as SplashScreen from 'expo-splash-screen';
import { useFonts } from 'expo-font';

import MathJax from './MathJax';
import { fetchAllData } from '../Database/Db';
import styles from "./Teszt.style";
import ValaszokGroup from "./ValaszokGroup";
import { BASE64_FONT } from './BASE64_FONT';
import { Feladat } from '../Database/Feladat';

const css = `
@font-face {
  font-family: 'Quicksand';
  src: url('data:font/woff2;charset=utf-8;base64,${BASE64_FONT}') format('woff2');
  font-weight: normal;
  font-style: normal;
}
html{
  margin: 0;
  font-size: 5vw;
}
body{
  font-family: Quicksand;
  font-weight: normal;
  font-style: normal;
}`;

//SplashScreen.preventAutoHideAsync();

export default function Teszt() {
  const [fontsLoaded] = useFonts({
    'Quicksand-Regular': require('../../assets/fonts/Quicksand-Regular.ttf'),
  });

  const [feladatok, setFeladatok] = useState<Feladat[]>([]);
  const [visibleFeladatok, setVisibleFeladatok] = useState<Feladat[]>([]);
  const [currentPage, setCurrentPage] = useState(0);
  const [selectedValasz, setSelectedValasz] = useState<number>(-1);
  const [joMegoldas, setJoMegoldas] = useState<number>(0);
  const [ellenorizve, setEllenorizve] = useState<boolean>(false);

  useEffect(() => {
    handleFetchFeladatok();
  }, []);

  const handleFetchFeladatok = () => {
    fetchAllData()
      .then((result) => {
        setFeladatok(result);
      })
      .catch((err) => {
        console.error('Error fetching feladatok:', err);
      });
  }

  useEffect(() => {
    if (feladatok.length > 0) {
      setVisibleFeladatok([feladatok[currentPage]]);
    }
  }, [currentPage, feladatok]);

  const prevPage = () => {
    const prevPage = currentPage - 1;
    setCurrentPage(prevPage);
  };

  const nextPage = () => {
    const nextPage = currentPage + 1;
    if (nextPage >= feladatok.length) {
      return;
    }
    setCurrentPage(nextPage);
    setEllenorizve(false);
    setSelectedValasz(-1)
  };

  const handleSelection = (index: number) => {
    setSelectedValasz(index);
  };

  const ellenorzes = () => {
    setEllenorizve(true);
  };

  const handleSelectionWrapper = (i: number, megoldas: number) => {
    handleSelection(i);
    setJoMegoldas(megoldas - 1);
  };

  const renderItem = ({ item }: { item: Feladat }) => {

    return (
      <View key={item.ID}>
        <View>
          <View style={styles.feladatSzamTextContainer}>
            <Text style={styles.feladatSzamText}>{item.Feladatszam}.</Text>
          </View>
          <View style={styles.kerdesContainer}>
            <MathJax
              showsVerticalScrollIndicator={false}
              overScrollMode="never"
              style={styles.kerdesMathJax}
              html={`<head><style>${css}</style></head><body>
              <p style='user-select: none; hyphens: auto; overflow: hidden; text-indent: 50px;'>${item.Kerdes}</p>
              </body>`}
            />
          </View>
        </View>
        <ValaszokGroup
          valasz={[item.Valasz1, item.Valasz2, item.Valasz3, item.Valasz4]}
          jo={joMegoldas}
          ellenorizve={ellenorizve}
          selectedIndex={selectedValasz}
          onSelection={(index: number) => handleSelectionWrapper(index, item.Megoldas)}
        />
      </View>
    );
  };

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <SafeAreaView style={styles.screen} onLayout={onLayoutRootView}>
      <VirtualizedList
        overScrollMode="never"
        data={visibleFeladatok}
        getItemCount={() => visibleFeladatok.length}
        getItem={(data, index) => data[index]}
        renderItem={renderItem}
        keyExtractor={(item) => item.ID.toString()}
        ListEmptyComponent={<Text>Feladat betöltése...</Text>}
      />

      <View style={styles.navContainer}>
        <View style={styles.navBar}>
          <View style={[styles.navBtnContainer, styles.prev]}>
            {currentPage !== 0 && (
              <TouchableOpacity style={styles.nextOrPrevBtn} onPress={prevPage}>
                <Icon style={styles.nextOrPrevBtnIcon} name="leftcircle" size={50} color="#222222" />
              </TouchableOpacity>
            )}
          </View>
          <View style={styles.ellenorzesBtnContainer}>
            <TouchableOpacity
              style={!ellenorizve ? [styles.ellenorzesBtn, styles.activeBtn] : [styles.ellenorzesBtn, styles.inActiveBtn]}
              onPress={ellenorzes}
              disabled={ellenorizve}
            >
              <Text
                style={
                  !ellenorizve
                    ? [styles.ellenorzesBtnText, styles.activeText]
                    : [styles.ellenorzesBtnText, styles.inActiveText, { fontFamily: 'Quicksand-Regular' }]
                }
              >
                Ellenőrzés
              </Text>
            </TouchableOpacity>
          </View>
          <View style={[styles.navBtnContainer]}>
            {currentPage + 1 < feladatok.length && (
              <TouchableOpacity style={styles.nextOrPrevBtn} onPress={nextPage}>
                <Icon style={styles.nextOrPrevBtnIcon} name="rightcircle" size={50} color="#222222" />
              </TouchableOpacity>
            )}
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
} ***

My second code: ***

import React, { useEffect, useState, useCallback } from 'react';
import { Text, View, VirtualizedList, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { AntDesign as Icon } from '@expo/vector-icons';
import * as SplashScreen from 'expo-splash-screen';
import { useFonts } from 'expo-font';
import { SvgXml } from 'react-native-svg';

import MathJax from './MathJax';
import { fetchAllData } from '../Database/Db';
import styles from "./Teszt.style";
import ValaszokGroup from "./ValaszokGroup";
import { BASE64_FONT } from './BASE64_FONT';
import { svgs } from '../../constants';

/*const css = `
@font-face {
  font-family: 'Quicksand';
  src: url('data:font/woff2;charset=utf-8;base64,${BASE64_FONT}') format('woff2');
  font-weight: normal;
  font-style: normal;
}
html{
  margin: 0;
  user-select: none; 
  hyphens: auto; 
  overflow: hidden;
}
body{
  font-family: Quicksand;
  font-weight: normal;
  font-style: normal;
}
p{
  font-size: 6vw;
  text-indent: 5vw;
}
`;*/

SplashScreen.preventAutoHideAsync(); //GECIII
export default function Teszt() {

  const [fontsLoaded] = useFonts({
    'Quicksand-Regular': require('../../assets/fonts/Quicksand-Regular.ttf'),
  });

  const [feladatok, setFeladatok] = useState([]);
  const [visibleFeladatok, setVisibleFeladatok] = useState([]);
  const [currentPage, setCurrentPage] = useState(0);

  useEffect(() => {
    handleFetchFeladatok();
  }, []);

  const handleFetchFeladatok = () => {
    fetchAllData()
      .then((result) => {
        setFeladatok(result);
        setVisibleFeladatok(result.slice(currentPage, currentPage + 1));
      })
      .catch((err) => {
        console.error('Error fetching feladatok:', err);
      });
  };

  const prevPage = () => {
    const prevPage = currentPage - 1;
    setVisibleFeladatok(feladatok.slice(prevPage, prevPage + 1));
    setCurrentPage(prevPage);
  };

  const nextPage = () => {
    const nextPage = currentPage + 1;
    setVisibleFeladatok(feladatok.slice(nextPage, nextPage + 1));
    setCurrentPage(nextPage);

    setEllenorizve(false);
    setSelectedValasz([]);
  };


  const [selectedValasz, setSelectedValasz] = useState([]);
  const [joMegoldas, setJoMegoldas] = useState(0);
  const [ellenorzesBtnActive, setEllenorzesBtnActive] = useState(false);
  const [ellenorizve, setEllenorizve] = useState(false);

  const handleSelection = (index) => {
    setSelectedValasz(index);
    setEllenorzesBtnActive(true);
  }

  const ellenorzes = () => {
    setEllenorizve(true);
    setEllenorzesBtnActive(false);
  }

  const renderItem = ({ item }) => {
    const handleSelectionWrapper = (i) => {
      handleSelection(i);
      setJoMegoldas(item.Megoldas-1);
    };

    // Check for svgs
    let svgValue = null;
    for (const [property, value] of Object.entries(svgs)) {
      if (property === item.Kerdes2) {
        svgValue = value;
        break;
      }
    }

    return(
    <View key={item.ID}>
      <View style={styles.kerdesWrapper}>
        <View style={styles.feladatSzamTextContainer}>
          <Text style={styles.feladatSzamText}>{item.Feladatszam}.</Text>
        </View>
        <View style={styles.kerdesContainer}>
          <MathJax style={styles.kerdesMathJax} html={
          `<body>
          <p>${item.Kerdes}</p>
          </body>`
          }/>
          {item.Kerdes2 && <SvgXml width={300} height={300} xml={svgValue}/>}
          {item.Kerdes3 && (
          <MathJax style={styles.kerdesMathJax} html={
          `<body>
          <p>${item.Kerdes3}</p>
          </body>`
          }/>)}
        </View>
        
      </View>
      <ValaszokGroup valasz={[item.Valasz1, item.Valasz2, item.Valasz3, item.Valasz4]}
      jo={joMegoldas} ellenorizve={ellenorizve} selectedIndex={selectedValasz} onSelection={handleSelectionWrapper} />
    </View>
    );
  }


  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <SafeAreaView style={styles.screen} onLayout={onLayoutRootView} >
      <VirtualizedList
        overScrollMode="never"
        data={visibleFeladatok}
        getItemCount={() => visibleFeladatok.length}
        getItem={(data, index) => data[index]}
        renderItem={renderItem}
        keyExtractor={(item) => item.ID.toString()}
        ListEmptyComponent={<Text>Feladat betöltése...</Text>}
      />

      <View style={styles.navContainer}>
        <View style={styles.navBar}>
          <View style={[styles.navBtnContainer, styles.prev]}>
          {currentPage != 0 && (
            <TouchableOpacity style={styles.nextOrPrevBtn} onPress={prevPage}>
              <Icon style={styles.nextOrPrevBtnIcon} name="leftcircle" size={50} color="#222222" />
            </TouchableOpacity>
          )}
          </View>
          <View style={styles.ellenorzesBtnContainer}>
            <TouchableOpacity style={ellenorzesBtnActive ? [styles.ellenorzesBtn, styles.activeBtn] : [styles.ellenorzesBtn, styles.inActiveBtn]} onPress={ellenorzes} disabled={!ellenorzesBtnActive}>
              <Text style={ellenorzesBtnActive ? [styles.ellenorzesBtnText, styles.activeText] : [styles.ellenorzesBtnText, styles.inActiveText]}>Ellenőrzés</Text>
            </TouchableOpacity>
          </View>
          <View style={[styles.navBtnContainer, styles.next]}>
          {currentPage + 1 < feladatok.length && (
            <TouchableOpacity style={styles.nextOrPrevBtn} onPress={nextPage}>
              <Icon style={styles.nextOrPrevBtnIcon} name="rightcircle" size={50} color="#222222" />
            </TouchableOpacity>
          )}
          </View>
        </View>
      </View>

    </SafeAreaView>
  );
} ***