React native – Getting around "Rendered more hooks than during the previous render"

I’m looking to create a small app, where some elements will be nested in another. While developing the app I’m trying to segment each component into its own file (children), returning a function with 2 components in each Renderer and values.

The goal of this approach is to

1. Making the code more readable, and easier to develop
2. make the data in the class easily available for exporting purposes.

However, I experienced 2 issues, in the process

1. when the child-object uses useState, and renders an increasing amount of objects (say increasing an array size, rendering each element), the effect which increases the child-object size stops functioning (does nothing at all)
2. If the parent (so to speak) contains an array of child objects each with a render function, increasing the size of this array leads to dynamically increasing the number of hooks.

I don’t see a good way to get around this, and I’m hoping to get some clarity with this question

The simplest way to illustrate this is with a small example.
In the code below I’ve created a child component F, which holds a list of rows that it should render. This works all fine when F is the only element of the app. However, if the app contains a list of "F"’s, which may increase in size, this causes an increase in number of hooks.

What would be some possible ways around this, while maintaining the same or similar functionality?

import { useState } from 'react';
import { View, Text, SafeAreaView, Button } from 'react-native';

const F = () => {
  const [rows, setRows] = useState([1]);

  const handleAddRow = () => {
    setRows((old) => [...old, old.length + 1]);
  };

  const render = () => {
    return (
      <View>
      {rows.map((row, index) => (
        <Text>"index"</Text>
      ))}
      <Button title="Row button" style={{flex: 1, backgroundColor: '#aff'}}  onPress={() => handleAddRow}/>
      </View>
    );
  };

  return ({values: rows, Renderer : render});  
};

const App = () => {
  const [fs, setFs] = useState([F()]);

  const handleAddFs = () => {
    setFs((old) => [...old, F()]);
  };


  return ( 
    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
      <View>
      {fs.map((fi, index) => ( 
        fi.Renderer()
      ))}
      {fs.map((fi, index) => ( 
        <Text>`{fi.values.length}`</Text>
      ))}
      </View>
      <Button
        title="Press me"
        color="#f194ff"
        onPress={() => handleAddFs()}
      />
    </SafeAreaView>
  );
};

export default App;