Comment box will load after submission but text will not show up until I refresh - Reactjs

Jumping into a mature React App for my company but still learning the ins and outs of it. I have a comment box that when submitted, will load the text box and the css, but the actual comment doesnt show up until you refresh the page. I have tried to play around with the state logic but so far haven't been able to get anywhere. I should be able to hit submit, then see the comment show up with user who submitted it and when they submitted it. Any ideas?

Dispatch Store:

     public addComment(comment: string, dispatchId: string) {
        return this.api.post(`/dispatch/${dispatchId}/comment`, { 
         comment });
      }

     public async addComment(comment: string) {
        const retComment = await this.api.addComment(comment, 
          this.dispatch.id);
          runInAction(() => {
          this.dispatch.comments.unshift(retComment);
           });
           return retComment;
       }

Dispatch Details:

export class DispatchDetails extends React.Component {

public DispatchStore: DispatchStore;
public UserStore: UserStore;
private MessageStore: MessageStore;
private TestsStore: TestsStore;
private WellsStore: WellsStore;
public props: any;

private dispatchDisposer: any;

public state = {
    comment: '',
    dataTableItems: [] as any[],
    destinationWellId: '',
    disableEditing: true,
    dispatchItem: undefined as unknown as IDispatchItem,
    dispatchTruckOpen: [true] as boolean[],
    dispatchTrucks: [] as IDispatchTruck[],
    dispatchTrucksHaveEta: [] as boolean[],
    dropdownOpen: false,
    expenseList: [] as IEBPExpenseType[],
    isDirty: false,
    newExpenseList: [] as IEBPExpenseType[],
    newInventoryList: [] as IProduct[],
    newTruckIndex: -1,
    productList: [] as IProduct[],
    reallocateModal: false,
    reallocateTruckNew: undefined as unknown as IDispatchTruck,
    reallocateTruckOne: undefined as unknown as IDispatchTruck,
    reallocations: [] as IReallocation[],
    showNewTruckModal: false,
    showProductModal: false,
    statusIndex: 0,
    tab: 'product',
    wellList: [] as IWell[],
};



constructor(props: any) {
    super(props);
    this.DispatchStore = props.stores.DispatchStore;
    this.UserStore = props.stores.UserStore;
    this.MessageStore = props.stores.MessageStore;
    this.TestsStore = props.stores.TestsStore;
    this.WellsStore = props.stores.WellsStore;
}

public componentDidMount() {
    this.createDisposers();
    this.DispatchStore.getDispatch(this.props.match.params.dispatchId);
    this.WellsStore.getWellsNoFilter()
        .then(wellList => {
            this.setState({wellList});
    });
    this.props.stores.WellsStore.clearWell();
}

    private handleAddComment = () => {
       const comment = this.state.comment.trim();
        if (comment) {
          this.DispatchStore.addComment(comment)
            .then(data => {
                if (data) {
                    this.MessageStore.addMessage('Comment Added', 
                  'success');
                    this.setState({
                        comment: '',
                    });
                }
           });
          }
     }


       <div className="well-story">
          {   dispatch.comments &&
           dispatch.comments.map((story, index) =>
            <div key={index}>
           {story && story.comment && story.comment.split('/n').map((remark, indexRem) => {
              if(remark === '') {
               return <br key={indexRem} />;
               }
                 return <p key={indexRem} className="the-remark">{remark}</p>;
                 })
                    }
                    <p className="remark-datetime">
                     {story && story.commentBy + ' | ' + moment(story && story.commentDate, 'X').format('LLL')}
                                        </p>
                                        
                                    </div>
                                ) }
                            </div>
                        </Col>
                    </Row>
                    {
                        this.UserStore.hasPermission("Permissions.Dispatch.Comment") &&
                    <React.Fragment>
                        <Row>
                            <Col>
                                <Input
                                    type="textarea"
                                    rows="3"
                                    name="comment"
                                    id="comment"
                                    value={this.state.comment}
                                    onChange={this.handleChangeComment}
                                />
                            </Col>
                        </Row>
                        <Row>
                            <Col>
                                <Button style={{margin: "1rem"}} color="primary" onClick={this.handleAddComment}>Add Comment</Button>
                                <Button className="secondary" onClick={this.clearComment}>Clear Comment</Button>
                            </Col>
                        </Row>