React Js data.map creating formatting issue with divs

I have a Golf Scorecard that displays fine if I manually generate each row using divs but when I try and generate the divs in a data.map loop then it the formatting is all lost and doesnt display correctly.

Here is the code:

             <div className="griditem"></div>
          <div className="griditem">Total</div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem yellow">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem red">
            <input type="text" className="input" />
          </div>
          <div className="griditem red">
            <input type="text" className="input" />
          </div>
          <div className="griditem fred">
            <input type="text" className="input fred" />
          </div>
        

This is how I put it in the data.map:

         {data.map((item, index) => (
        <div key={index}>
          <div className="griditem"></div>
          <div className="griditem">Total</div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem yellow">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem">
            <input type="text" className="input" />
          </div>
          <div className="griditem red">
            <input type="text" className="input" />
          </div>
          <div className="griditem red">
            <input type="text" className="input" />
          </div>
          <div className="griditem fred">
            <input type="text" className="input fred" />
          </div>
        </div>
      ))}

How the formatting should appear

how the formatting appears in a data.map