Parent triggering function defined in Child, React Native

Good afternoon,

I have a react native project. I currently have 3 major UI components:

A timeline which consists of a user defined number of channels, which have a fluctuating number of events (Think gantt chart or audio editors). I want a button defined in the timeline to call a function defined in the child channel object, change some parameters as defined in the child function, and re-render.

const TIMELINE = ({ }) => {
  const router = useRouter();
  const [allChannels, setChannels] = useState([]);

  const addChannel = () => {
    const newChannel = <Channel onRef = {ref => (this.child=ref)} key={allChannels.length}/>;
    setChannels([...allChannels, newChannel]);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.welcomeMessage}>Timeline</Text>
      {
        allChannels.map((item)=>{
          return item
        })
      }
      <Pressable style={styles.searchBtn} onPress={()=>addChannel(allChannels, setChannels)}>
        <Image
          source={icons.add}
          resizeMode='contain'
          style={styles.searchBtnImage}
        />
      </Pressable>
      <Pressable style={styles.Btn} onPress={()=>updateEvents(allChannels, setChannels)}>
        <Image
          source={icons.search}
          resizeMode='contain'
          style={styles.searchBtnImage}
        />
      </Pressable>
  );
};

const updateEvents = (allChannels, setChannels) => {
  setChannels(allChannels => 
    allChannels.map(channel => {
      channel.child.updateChildEvents(2); //<<<<<<Error occurs here
      return channel;
    })
  );
};

As you can see, I store each channel object created in an array in the state variables of timeline. I then have a function that attempts to update the data stored in the events of each channel.

For reference, here is the Channel code as well:

class Channel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allEvents: [],
    };
  }
  updateChildEvents(scaleFactor) {
    this.state.allEvents = this.state.allEvents.map(event => ({
      ...event,
      width: event.width * scaleFactor,
    }));
  }

Unfortunately, this give me the error: “Cannot read properties of undefined (reading ‘updateChildEvents’)” when called on the button press

I have tried passing the ref to the child on creation, as suggested in this answer on SO Call child function from parent component in React Native but that also fails. I think the issue is actually how the Channel elements are stored in the state. Most examples and Stack Overflow answers I have found have a static number of children, and therefore static refs. Since I have a dynamic number of children (both Channels and Events), I think I need a better way to define my refs dyanmically as well.

So my first question: Is this the right approach? Should I define these as separate components, or should the timeline just contain all of the data (channels and channel events) in its state directly?

Otherwise, if this is the proper way to define everything (which is how I would go about this in object oriented projects I have built before outside of react native), what am I missing? Why does my current approach not work?

Thank you!