Modify states from a non react.component class - reactjs

Question

In my file I have a Main class which extends React.Component. The class is exported at the end of the file. It has some states, one of which is a list (Object[]).
Within the file there is another class (let's call it Foo) which has other functions. I create a reference to Foo within Main, and then use that to call bar() within Foo.
In bar, I have a for loop which should add 5 TestComponents to that list mentioned above.
Since it's a state, I also have Foo extending React.Component. The issue is that even though that allows me to use setState(), the component is never mounted so when you modify the state you get:
Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Foo component.
If I remove the extends React.Component from Foo then of course, I can't change the state since I can't use setState.
Here is a very simplified version of my main code:
interface State {
list: Object[];
}
class Main extends React.Component<{}, State> {
foo = new Foo();
state = {
list: [],
}
componentDidMount() {
console.log(this.state.list); //logs: []
this.foo.bar();
console.log(this.state.list); //logs: [] expected: [TestComponent....]
}
render() {
return (
<IonContent>
<IonList>
{
//this.list.map(...);
}
</IonList>
</IonContent>
);
};
};
class Foo extends React.Component<{}, State> {
state = {
list: [],
}
constructor(props) {
super(props);
}
componentDidMount() {
console.log("mounted"); //doesnt log this since component doesnt get mounted
}
bar() {
for(let i = 0; i < 5; i++) {
let a = <TestComponent key={i}></TestComponent>
this.setState({
list: [...this.state.list, a], //errors here saying component not mounted
});
}
}
}
export default Main;
How can I modify the list state from within Foo since Foo is never mounted as a component ('mounted' is never logged)?
I tried seeing if a render function would mount it but like I thought it didn't.
render() {
return(
<></>
);
}

Answer 1

I got this to work using globals (this should solve two problems at once. I needed the array 'global' within a single script but also within every script)
I did this by creating a globals.tsx file.
Within the file I added:
export var bluetoothDevices: Object[] = [];
then to access it the global you can do:
import { bluetoothDevices } from '/globals/globals'
bluetoothDevices.push(x);
and it's as simple as just pushing anything to the array. I can confirm this works within the file (I can modify and read it from each class) although I can't confirm if it works throughout all scripts since I only have 1 page at the moment.