map function reducing index not working (with React)

I am trying to assign a className for each div mapped from an array of characters valid names except for a period. I used if-statements inside the map function to return the desired react object and it is supposed to "ignore" the period and return a continuous numbered className but instead it does ignore the period but numbers the className incorrectly.

Letters.js

import { Fragment } from "react";

const Letters = () => {
  const characters = "STRI.G".split("");

  const stringBuilder = characters.map((character, i) => {
    if (character !== ".") {
      return <div className={`type${i + 1}`}>{character}</div>; // Works
    } else if (i === 5) {
      // If index value reached the value after '.'
      return <div className={`type${i - 1}`}>{character}</div>; // Does not work, className here remains "type6" instead of "type5"
    } else {
      return <div>{character}</div>; // For when character === '.'
    }
  });

  return <Fragment>{stringBuilder}</Fragment>;
};

export default Letters;