How do i pass data from one component to another in realtime?

I am trying to pass data that I pull from a SQLDatabase into another component that would display it. I'm not sure how to do it exactly...

In my App.js

This calls CustomList

import CustomList from './components/FlatList';export default function App() {  return(<CustomList />  );};

which

In my CustomList

import Data from './Data';...export default function CustomList() {    //Sets up Getter , Setter , Initial Data    const [data, setData] = useState(Data);    ...    return (<FlatList             ListHeaderComponent = {header}            data = {data}            keyExtractor = { (item) => (item.id).toString()}            ItemSeparatorComponent = { () => <View style={styles.itemSeparator}></View>}            contentContainerStyle={ {borderBottomColor:'grey', borderBottomWidth: 1} }            renderItem = { ({item, index}) => <ListItem item={item} index={index}/>}       />...

The CustomList above works if I import hard-coded data below

In my Data.js

const Data = [    {id: 1, text: 'Boadb'},    {id: 2, text: 'Joe'},    {id: 3, text: 'Jane'},    {id: 4, text: 'John'},    {id: 5, text: 'Janet'},    {id: 6, text: 'Janet'},    {id: 7, text: 'Janet'},    {id: 8, text: 'Janet'},];export default Data;

However, I want a real-time syncing database that will update the CustomList whenever changes are made.

In my SQLData.js

let helperArray;...export default function SQLData() {     ...     function querySuccess(tx, results) {         ...         helperArray = [];         //Go through each item in dataset         for (let i = 0; i < len; i++) {         let row = results.rows.item(i);         helperArray.push(row);      }    ...    return ();  };

As you can see from the code above, I have put the data pulled from the SQLDatabase into a variable helperArray. I was wondering how do I import it similarly like 'Data.js' and have it output the same way! Thanks