React storing components in state with props not updating - reactjs

Question

{article.map((ArticleComp, i) =>
<div className="light-blue p-4 mb-3 mt-3" key={i}>
{ArticleComp}
<button type="button" className="red-button ml-2" onClick={() => removeArticle(i)}>Delete</button>
</div>
)}
<div className="mt-4">
<button type="button" className="blue-button" onClick={() => setAddArticle(true)}>Add Job</button>
<button type="button" className="blue-button ml-2" onClick={() => { setArticle([...article, <Article create="true" post={addArticle} updateError={props.updateError} updateArticle={UpdateArticleCallback}/>]) }}>Add Article</button>
<Link to="/job/all"><button type="button" className="red-button ml-2">Cancel</button></Link>
</div>
export default function Article(props) {
const [title, setTitle] = useState("")
const [content, setContent] = useState("")
if (props.edit === "true" || props.create === "true") {
if (props.post !== "no") {
axios.post('/api/v1/article/create.php', {
title: title,
content: content,
job_id: props.post
}).then((response) => {
if(response.data.Message === 'OK'){
props.updateError(null)
props.updateArticle()
} else {
props.updateError(response.data.Error)
}
})
}
return (
<Row>
{props.post}
<Col>
<Form.Group>
<Form.Label>Article Title</Form.Label>
<Form.Control key="articleTitle" type="text" placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} maxLength="200" />
</Form.Group>
<Form.Group>
<Form.Label>Article Content</Form.Label>
<Form.Control as="textarea" rows={3} key="articleContent" placeholder="Alert Content" value={content} onChange={e => setContent(e.target.value)} maxLength="500" />
</Form.Group>
</Col>
</Row>
)
} else {
return (
<>
{props.article.map((article, i) =>
<div key={i} className="light-blue p-4">
<Row><Col><h3>{article.title}</h3><p>{article.content}</p></Col></Row>
</div>
)}
</>
)
}
}
I am passing the state variable addArticle as a prop however when I update the state, the component does not update. The component works as expected when not in the article state and then being mapped out. Shown is the Article component being added to the article state which is then being rendered. I rendered the props.post in the Article component so I could visually see the state updating. The props.post only takes the latest state when a new article is appended to the state
Thanks