You are an expert software engineer specialised in Next.js 14 with TypeScript. I have a component which controls how components are rendered. I have an issue where it displays the first state of the render and then quickly flickers to the right state.

I need you to make sure it does not create this flickering effect, only rendering the final state.

```
"use client";

import React, { useMemo } from "react";
import useScreenWidth from "../../hooks/screen-width.hook";

/**
 * Defines the possible TailwindCSS breakpoints.
 */
type Breakpoint = "base" | "sm" | "md" | "lg" | "xl" | "2xl";

/**
 * Props interface for the Container component.
 *
 * @template P - The type of the props expected by the child component.
 */
interface ContainerProps<P> {
  /**
   * The child component to be rendered within the container.
   */
  childComponent: React.ComponentType<P>;

  /**
   * An array of props that will be passed to each child component.
   */
  propsArray: P[];

  /**
   * A prefix string to ensure unique keys for each child component.
   */
  keyPrefix: string;

  /**
   * The invisible component to fill empty spots in a row.
   * This ensures consistent spacing by occupying space similar to child components.
   */
  widthInvisible: string;

  /**
   * An object specifying the number of children per row for each TailwindCSS breakpoint.
   * Example:
   * {
   *   base: 1,
   *   md: 2,
   *   xl: 3
   * }
   */
  childrenPerRow?: Partial<Record<Breakpoint, number>>;
}

/**
 * Container component to display child components in a responsive, wrapping layout.
 * Ensures space-between behavior for each row with customizable gaps and fills empty spaces with an invisible component.
 *
 * @template P - The type of the props expected by the child component.
 *
 * @param {ContainerProps<P>} props - The props for the Container component.
 *
 * @returns {JSX.Element} The rendered Container component.
 */
const Container = <P,>({
  childComponent: ChildComponent,
  propsArray,
  keyPrefix,
  widthInvisible,
  childrenPerRow,
}: ContainerProps<P>): JSX.Element => {
  // Determine screen size using the useScreenWidth hook for each breakpoint
  const is2xl = useScreenWidth("2xl");
  const isXl = useScreenWidth("xl");
  const isLg = useScreenWidth("lg");
  const isMd = useScreenWidth("md");
  const isSm = useScreenWidth("sm");

  /**
   * Determines the current number of children per row based on the active breakpoint.
   * It checks from the largest breakpoint to the smallest to find the highest matching breakpoint.
   */
  const numberOfChildrenPerRow = useMemo(() => {
    if (is2xl && childrenPerRow?.["2xl"]) {
      return childrenPerRow["2xl"]!;
    } else if (isXl && childrenPerRow?.["xl"]) {
      return childrenPerRow["xl"]!;
    } else if (isLg && childrenPerRow?.["lg"]) {
      return childrenPerRow["lg"]!;
    } else if (isMd && childrenPerRow?.["md"]) {
      return childrenPerRow["md"]!;
    } else if (isSm && childrenPerRow?.["sm"]) {
      return childrenPerRow["sm"]!;
    } else {
      return childrenPerRow?.["base"] ?? 1; // Default to 1 if 'base' is not specified
    }
  }, [is2xl, isXl, isLg, isMd, isSm, childrenPerRow]);

  /**
   * Groups the propsArray into chunks based on the numberOfChildrenPerRow.
   * Each chunk represents a row of child components.
   */
  const rows: P[][] = useMemo(() => {
    const tempRows: P[][] = [];
    for (let i = 0; i < propsArray.length; i += numberOfChildrenPerRow) {
      tempRows.push(propsArray.slice(i, i + numberOfChildrenPerRow));
    }
    return tempRows;
  }, [propsArray, numberOfChildrenPerRow]);

  /**
   * Generates required number of invisible components to fill the empty spots in a row.
   *
   * @param {number} missingCount - The number of invisible components needed.
   * @param {number} rowIndex - The index of the current row.
   *
   * @returns {JSX.Element[]} An array of invisible components.
   */
  const renderInvisibleComponents = (missingCount: number, rowIndex: number): JSX.Element[] => {
    return Array.from({ length: missingCount }, (_, idx) => (
      <div key={`${keyPrefix}-invisible-${rowIndex}-${idx}`} className={`invisible ${widthInvisible}`} />
    ));
  };

  return (
    <div className="h-fit w-full flex flex-col gap-8">
      {rows.map((row, rowIndex) => {
        const missingCount = numberOfChildrenPerRow - row.length;
        return (
          <div key={`${keyPrefix}-row-${rowIndex}`} className="h-fit w-full flex justify-between gap-8 lg:gap-10 xl:gap-12">
            {row.map((childProps, childIndex) => (
              <ChildComponent key={`${keyPrefix}-${rowIndex}-${childIndex}`} {...childProps} />
            ))}
            {missingCount > 0 && renderInvisibleComponents(missingCount, rowIndex)}
          </div>
        );
      })}
    </div>
  );
};

export default Container;
```