Why do my image sprites only change after closing the run, instead of when I start the game?

Question

Why do my image sprites only change after closing the run, instead of when I start the game?

What I mean by this is that, upon starting the run, it does nothing. But once I hit the play button to end the run, it suddenly changes the images of shirtSpace and pantsSpace in both the game window and editor?

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ClothesScript : MonoBehaviour
{
    // Variables
    Image shirtRenderer;
    Image pantsRenderer;
    Sprite[] shirtArray;
    Sprite[] pantsArray;
    public GameObject shirtSpace;
    public GameObject pantsSpace;
    int currentShirtIndex = 0;
    int currentPantsIndex = 0;

    // Start is called before the first frame update
    void Start()
    {
        shirtRenderer = shirtSpace.GetComponent<Image>();
        pantsRenderer = pantsSpace.GetComponent<Image>();
        shirtArray = new Sprite[4];
        pantsArray = new Sprite[4];
        LoadArrays();
        UpdateShirt();
        UpdatePants();
    }

    // Update is called once per frame
    void Update()
    {

    }

    // LoadArrays is called by Start to fill the arrays
    void LoadArrays()
    {
        shirtArray[0] = Resources.Load<Sprite>("Shirt0");
        shirtArray[1] = Resources.Load<Sprite>("Shirt1");
        shirtArray[2] = Resources.Load<Sprite>("Shirt2");
        shirtArray[3] = Resources.Load<Sprite>("Shirt3");
        pantsArray[0] = Resources.Load<Sprite>("Pants0");
        pantsArray[1] = Resources.Load<Sprite>("Pants1");
        pantsArray[2] = Resources.Load<Sprite>("Pants2");
        pantsArray[3] = Resources.Load<Sprite>("Pants3");
    }

    // UpdateShirt is called by Start and whenever the currentShirtIndex is changed
    void UpdateShirt()
    {
        shirtRenderer.sprite = shirtArray[2];
        Debug.Log("Cleared Shirt");
    }

    // UpdatePants is called by Start and whenever the currentPantsIndex is changed
    void UpdatePants()
    {
        pantsRenderer.sprite = pantsArray[currentPantsIndex];
        Debug.Log("Cleared Pants");
    }

    // ShirtDecrease is called when ShirtLeftButton is clicked
    public void ShirtDecrease()
    {
        if(currentShirtIndex <= 1)
        {
            currentShirtIndex = 3;
        }
        else
        {
            currentShirtIndex--;
        }
    }

    // ShirtIncrease is called when ShirtRightButton is clicked
    public void ShirtIncrease()
    {
        if(currentShirtIndex == 3)
        {
            currentShirtIndex = 1;
            UpdateShirt();
        }
        else
        {
            currentShirtIndex++;
        }

        UpdateShirt();
    }

    // PantsDecrease is called when PantsLeftButton is clicked
    public void PantsDecrease()
    {
        if(currentPantsIndex <= 1)
        {
            currentPantsIndex = 3;
        }
        else
        {
            currentPantsIndex--;
        }
    }

    // PantsChange is called when PantsRightButton is clicked
    public void PantsIncrease()
    {
        if(currentPantsIndex == 3)
        {
            currentPantsIndex = 1;
        }
        else
        {
            currentPantsIndex++;
        }
    }
}

Answer 1

It looks to me like you want something more like this:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ClothesScript : MonoBehaviour
{
    // Let's not repeat ourselves. 
    // Make a class for all the code used by both shirt & pants, so we type it once.
    [System.Serializable]
    public class SpriteSwapper {
        // Assign this in the inspector, like you do with shirtSpace already.
        [SerializeField] SpriteRenderer renderer;

        // Likewise, assign your sprites in the inspector.
        // Avoid using Resources.Load()
        [SerializeField] Sprite[] sprites;
 
        int currentIndex;

        public void SetSprite(int index) {
            // Wrap the index into the bounds of the array 
            // (-1 will go to the last item in the array, -2 the second last...)
            // I assume index >= -sprites.Length, but you can check/assert if needed.
            currentIndex = (index + sprites.Length) % sprites.Length;
            renderer.sprite = sprites[currentIndex];
        }

        // No need for separate Increase/Decrease methods.
        // Call CycleSprite(1) to step forward, CycleSprite(-1) to step backward.
        public void CycleSprite(int step) {
            // Because of the wrapping in SetSprite, this handles any step forward,
            // or a step as large as the full array length backward.
            SetSprite(currentIndex + step);
        }
    }

    // Now each clothing item is just an instance of that class.
    [SerializeField] SpriteSwapper shirt;
    [SerializeField] SpriteSwapper pants;

    // No searching to do - you can just initialize each swapper.
    void Start() {
        shirt.SetSprite(0);
        pants.SetSprite(0);
    }

    // If you want to maintain the same API, it's just one-liners now:
    public void ShirtIncrease() { shirt.CycleSprite( 1); }
    public void ShirtDecrease() { shirt.CycleSprite(-1); }
    public void PantsIncrease() { pants.CycleSprite( 1); }
    public void PantsDecrease() { pants.CycleSprite(-1); }
}

That's much less code, even with all my comments, and will scale better as you add more clothing items to swap. If you encounter a bug, you can fix it in one place and it will work the same for all clothing items, unlike your current code where it's easy to introduce an inconsistency between shirts and pants, as shown in your question:

void UpdateShirt()
{
    shirtRenderer.sprite = shirtArray[2]; // Always picks 2.
    Debug.Log("Cleared Shirt");
}

void UpdatePants()
{
    pantsRenderer.sprite = pantsArray[currentPantsIndex]; // Variable index.
    Debug.Log("Cleared Pants");
}