How to show overflow bar even when I am not scrolling?

Question

I have a table (6 columns) that's located in a div. That parent div has overflow-x: auto.

On mobile, the scrollbar is shown only when I move left-right to see the content of the table and disappears after a second or so. I want that scrollbar to stay on all the time. How do I solve this? On tablets and desktop, the table is full-screen and has no scrollbar, which is fine.

import React from "react";
import { Container } from "../../styles/container";
import { TableBasic } from "./Table.styled";

const Table = () => {
  return (
    <Container>
      <h1>Locations</h1>
      <div style={{ overflowX: "auto" }}>
        <TableBasic>
          <thead>
            <tr>
              <th>Name</th>
              <th>Country</th>
              <th>Latitude</th>
              <th>Longitude</th>
              <th>Wind Prob.</th>
              <th>When to go</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Angular Project</td>
              <td>Peter Charles</td>
              <td>TD</td>
              <td>TD</td>
              <td>TD</td>
              <td>TD</td>
           </tr>
           <tr>
              <td>React Project</td>
              <td>Ronald Frest</td>
              <td>TD</td>
              <td>TD</td>
              <td>TD</td>
              <td>TD</td>
            </tr>
           <tr>
              <td>Vuejs Project</td>
              <td>Jack Obes</td>
              <td>TD</td>
              <td>TD</td>
              <td>TD</td>
              <td>TD</td>
           </tr>
           <tr>
              <td>Bootstrap Project</td>
              <td>Jerry Milton</td>
              <td>TD</td>
              <td>TD</td>
              <td>TD</td>
              <td>TD</td>
           </tr>
         </tbody>
       </TableBasic>
     </div>
   </Container>
  );
};

export default Table;

CSS:

 import styled from "styled-components";

 export const TableBasic = styled.table`
   width: 100%;
   border-collapse: collapse;
   border-width: 0;
   border-style: solid;
   border-color: #ebe9f1;

  & th {
   text-transform: uppercase;
   font-size: 0.857rem;
   letter-spacing: 0.5px;
   padding: 0.72rem 2rem;
   text-align: inherit;
   background-color: #f3f2f7;
   border-color: inherit;
   border-bottom: 1px solid #ebe9f1;
  }

 & tbody tr:last-child > * {
  border-bottom-width: 0;
}

& td {
  padding: 0.72rem 2rem;
  border-color: inherit;
  border-bottom: 1px solid #ebe9f1;
}
`;