function generateColors(count: number): string[] {
  const colors: string[] = [];
  for (let i = 0; i < count; i++) {
    const color = Math.floor(Math.random() * 16777215).toString(16);
    colors.push(`bg-[#${color}]`);
  }
  return colors;
}

const arrayOfColors = [
    {
      id:"1",
      data:{
        colors: generateColors(1),
      }
    },
    {
     id:"2",
      data:{
        colors: generateColors(1),
      }
    }

]


// rest of the code

 {data.colors?.length === 1 ? (
    <div className={`h-2 ${data.colors[0]}`}></div>
  ) : (
   <div className="flex">
      <div className={`h-2 ${data.colors?.[0]} w-1/2`}></div>
      <div className={`h-2 ${data.colors?.[1]} w-1/2`}></div>
   </div>
  )}