How to stop React Native re-rendering?

I'm still learning to use React Native and runnig into an issue with the stack size being exceeded but I'm unsure why. Looking at other posts I see it must be that the screen is being rerendered too many times and is stuck in a loop but how can I prevent this happening?
RaceListScreen

export function RandomRaceScreen(this: any, {navigation: navigation}) {  const [raceList, setRaceList] = useState<RaceModel[]>([]);  useEffect(() => {    const fetchedRaces: RaceModel[] = getCoreRaceList();    setRaceList(fetchedRaces);  }, []);  //number of players must be less than max number of available races  const racePressed = (raceId: number) => {    console.log('Displaying info about Race, ', raceId);    navigation.navigate('RaceLoreListScreen', {raceId: raceId});  };  const renderRaces = (item: unknown) => {    return (<RaceCard        race={item.item}        onClick={() => {          racePressed(item.item._groupId);        }}      />    );  };  const width = Dimensions.get('window').width;  return (<ImageBackground      source={require('../../assets/space_background_reduced_v1.png')}      style={globalStyles.background}><FlatList        data={raceList}        renderItem={renderRaces}        sliderWidth={width}        containerCustomStyle={style.carousel}        contentContainerCustomStyle={style.card}        itemWidth={width * 0.8}        layout="default"        removeClippedSubviews={false}      /></ImageBackground>  );}

getCoreRaceList function:

import {RaceModel} from '../../models/RaceModel';import races from '../../races/core_races.json';export function getCoreRaceList(): RaceModel[] {  let raceList: RaceModel[] = [];  for (let i = 0; i < 5; i++) {    raceList.push(      new RaceModel(races[i], races[i].name, races[i].homeworld, false),    );  }  return raceList;}