Weekday boxes have little lines or spaces between them if you look carefully. These lines or gaps are present in chrome but not in firefox – CSS

I am using vite react typescript.

My App component

function App() {
  return (
    <div>
      <DatePicker />
    </div>
  );
}

My DatePicker component

function DatePicker() {
  return (
    <div className="datepicker-wrapper">
      <input />
      <input />

      <Calendar />
    </div>
  );
}

My Calendar Component

function Calendar() {
  return (
    <div className="datepicker-popper">
      <div className="datepicker-weekday">Sunday</div>
      <div className="datepicker-weekday">Monday</div>
      <div className="datepicker-weekday">Tuesday</div>
      <div className="datepicker-weekday">Wednesday</div>
      <div className="datepicker-weekday">Thursday</div>
      <div className="datepicker-weekday">Friday</div>
      <div className="datepicker-weekday">Saturday</div>
    </div>
  );
}

and finally my css file

body {
  margin: 0;
}

.datepicker-wrapper {
  position: relative;
  font-family: monospace;
  display: flex;
  gap: 2rem;
}

.datepicker-popper {
  position: absolute;
  bottom: -0.8rem;
  left: 50%;

  translate: -50% 100%;

  box-sizing: border-box;
  padding: 0.3rem;
  width: 100%;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 0.6rem;
}

.datepicker-weekday {
  display: block;
  background-color: palevioletred;
}

check this image
The boxes containing weekdays have weird space or line b/w them in chrome but not in firefox.

I tried making the container flexbox, grid. I also tried changing the div to span but none of them worked.

Here is the codesandbox link : https://codesandbox.io/p/sandbox/wonderful-stitch-deoc00?file=%2Fsrc%2Findex.css&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A31%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A1%7D%5D

Try running this sandbox in chrome and firefox. You will see the difference.