React child component doesn't re-render when parent state changes - reactjs

Question

I'm writing a React stateful component to process text inputted in a textbox, and to save and load text between a database and the textbox. I can type in the textbox, and I can save what's in the textbox to my database. When I load from the database to the textbox, my component's state updates, and the (child) textbox's prop which handles passing text from the parent component to the textbox updates according to React DevTools in Chrome. The problem is that the value of the textbox is not re-rendered to reflect the new prop.
I did some research, and I found that React components are supposed to re-render whenever the state changes. I tried adding state to the child component using useState(), and I update the state every time the props change using
useEffect(() => setText(propText), [propText])
It didn't work. The props and state in React DevTools show the value I loaded in, but the component doesn't show it in the textbox. Maybe it isn't designed to get its input value from props and state as opposed to a user typing, but its onChange() event handler updates the parent state like I'm trying to do with the database access component, so it's completely abstracted.
Here's the child component as it stands right now:
function InputTextComponent(props) {
const { parentInput, textUpdate } = props;
const [text, setText] = useState(parentInput);
useEffect(() => setText(parentInput), [parentInput]);
const onTextChange = event => {
const {
target: { value }
} = event;
textUpdate(value);
};
return (
<TextAreaGroup
placeholder={'Input text'}
name={'Input text here'}
value={text}
info={'Input text'}
onChange={event => onTextChange(event)}
/>
);
}
Here's the parent component:
class ParentComponent extends Component {
constructor() {
super();
this.state = {
textInput: '',
};
this.textUpdate.bind(this);
}
textUpdate = textInput => this.setState({ textInput });
render() {
const {
textInput,
} = this.state;
return (
<div className="container mt-3">
<InputTextComponent
textUpdate={this.textUpdate}
parentInput={textInput}
/>
<LoadTextsComponent
alias={alias} // alias is irrelevant part of the component
aliasUpdate={this.aliasUpdate}
skuUpdate={this.skuUpdate}
/>
</div>
);
}
}
The database load component uses the textUpdate() function. Here's the full component:
function LoadTextsComponent(props) {
const { alias, aliasUpdate, textUpdate } = props;
const [setList, setListUpdate] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await client.get('/texts/listTexts');
aliasUpdate(result[0].alias);
setListUpdate(result);
};
fetchData();
}, []);
const loadTextsToInputBox = () => {
let aliasSet;
for (let set of setList) {
if (set.alias === alias) {
aliasSet = set.texts;
}
}
let textString = '';
for (let text of aliasSet) {
textString += text + '\n';
}
textString = textString.slice(0, -1);
textUpdate(textString);
};
return (
<div>
<ShowAliasesComponent
setList={setList}
alias={alias}
aliasUpdate={aliasUpdate}
/>
<button
disabled={!alias}
className="btn btn-primary"
onClick={() => loadTextsToInputBox()}
>
Send texts of alias {alias} to input box
</button>
</div>
);
}
What's really confusing is when I type in the child textbox, the parent state updates correctly (passing down a function to update parent state) and the new prop is reflected in the render. But, when I call that same function from the database load component, nothing happens.