Reactjs doesnot allow dir="rtl" to show text RTL

.rtl{
      direction: rtl;
     }

 <Col lg="9" md="8" sm="7">
                                    <div className="blog-details-box">
                                        <div className="blog-details-banner">
                                            <img src={process.env.PUBLIC_URL + `/assets/images/${Datas[blogId].postImg}`} alt="" className="img-fluid" />
                                        </div>
                                        <div className="heading" dir="rtl">
                                            <h4 className="rtl">{Datas[blogId].postTitle}</h4>
                                        </div>
                                        <div className="blog-auth_date d-flex">
                                           
                                        <div className="author-img d-flex">   
                                            <p><Link to={process.env.PUBLIC_URL + "/"}>{Datas[blogId].authorName}</Link></p>
                                      </div>
                                            <div className="post-date">
                                                <p><i className="las la-calendar"></i> {Datas[blogId].postDate}</p>
                                            </div>
                                           
                                        </div>


                                        <div className="blog-details-desc">
                                            <p> {Datas[blogId].postContent}</p>
                                           
                                        </div>
                                      
                                        

                                     
                                    </div>
                                </Col>