React, get data from Firebase and update State - reactjs

Question

I've been creating some React Apps using local data to populate Components etc and all is working fine. Im now at the point where i want to host this data externally (Firebase) and consume it within my apps.
My issue may be a general 'Working With React and External Data' kinda thing but in a basic way...
I get my data from Firebase
When component has mounted
I use setState to pass this external data to the component state
I expect my components to rerender with this new external data
Unfortunately my page isnt updating with the new Firebase data, it just uses the Initial state i am setting
I wondered if using componentWillMount() was a better area to assign the Firebase data so it is ready before the first render but it seems this approach is now deprecated
Is there something obviously wrong with the way i am getting, setting or passing my Firebase data from one Parent component to a Child component?
Thanks
Parent component
import './App.scss';
import DataThoughts from "./assets/data/DataThoughts";
import Thoughts from "./components/Thoughts";
import HideHeader from './components/HideHeader';
import HideFooter from './components/HideFooter';
import FireBaseThoughts from './components/firebaseThoughts';
import {onValue, ref} from "firebase/database";
import {Component} from "react";
class AppThoughts extends Component {
constructor(props) {
super(props);
this.state = {
"data": [
{
"Date": "Initial Date",
"Thought": "Initial Thought",
"Author": "Initial Author",
"Location": "Initial Location",
"Photo": "Initial Photo",
"Emotion": "Initial Emotion"
}
]};
};
componentDidMount() {
onValue(ref(FireBaseThoughts, '/'), (snapshot) => {
const data = snapshot.val();
this.setState({data});
});
}
render() {
const data = this.state.data;
return (
<div className="App">
<HideHeader />
<HideFooter />
<main className={'bg-light'}>
<div className={'container-fluid'}>
<Thoughts data={data} />
</div>
</main>
</div>
);
}
}
export default AppThoughts;
Child component
import React, { Component } from 'react';
import FilterButton from "./FilterButton";
class Thoughts extends Component {
constructor(props) {
super(props);
this.state = {...props};
}
handleClick = value => () => {
// set to initial data
this.setState({ ...this.props });
if(value === "All") {
// Do nothing
} else {
// filter the initial data
let filtered = this.props.data.filter(item => item.Emotion === value);
this.setState({ data: filtered });
}
};
render() {
let data = this.state.data;
let numberOfThoughts = data.length;
let dataList = this.state.data.map((thought, i) =>
<div key={'thought'+i} className={`card thought mb-5 ${thought.Photo ? '' : 'bg-transparent shadow-0'} animate__animated animate__fadeIn`} style={{animationDelay:`${(i / 10)}s`}}>
{thought.Photo ? <img src={thought.Photo} className="card-img-top" alt={thought.Emotion}/> : ''}
<div className={`${thought.Photo ? 'p-5' : 'p-5'}`}>
<blockquote className={`blockquote mb-0 ${thought.Photo ? '' : 'text-danger'}`}>
<p className={'small opacity-50'}>{thought.Date}</p>
<p className={`${thought.Photo ? 'display-6' : ' display-4'} mb-4`}>{thought.Thought}</p>
<footer className="small opacity-50">{thought.Author}, <cite title="Source Title">{thought.Location}</cite></footer>
</blockquote>
</div>
</div>
);
return (
<section className="row section-row justify-content-start thoughts py-5">
<div className={'card-columns'}>
{dataList}
</div>
<div className={'appControlsInfo'}>
<span className={'appControlsInfo__items'}>{numberOfThoughts}</span>
<button type="button" className="btn btn-danger appControlsInfo__btn" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i className="bi bi-list"></i>
</button>
<div className={'appControlsInfo__more collapse'} id="collapseExample">
<FilterButton buttonText={"All"} buttonType={'btn-dark'} onClick={this.handleClick('All')} />
<FilterButton buttonText={"Happy"} buttonType={'btn-dark'} onClick={this.handleClick('Happy')} />
<FilterButton buttonText={"Sad"} buttonType={'btn-dark'} onClick={this.handleClick('Sad')} />
<FilterButton buttonText={"Thinking"} buttonType={'btn-dark'} onClick={this.handleClick('Thinking')} />
</div>
</div>
</section>
);
}
}
Thoughts.defaultProps = {
Photo: '',
Emotion:'Emotion',
Date:'Date',
Thought:'Thought',
Author:'Author',
Location:'Location'
};
export default Thoughts; // Don’t forget to use export default!