diff --git a/src/lib/dot-matrix/custom-hooks/useChartContainerWidth.ts b/src/lib/dot-matrix/custom-hooks/useChartContainerWidth.ts
index 2f87f80..e844b00 100644
--- a/src/lib/dot-matrix/custom-hooks/useChartContainerWidth.ts
+++ b/src/lib/dot-matrix/custom-hooks/useChartContainerWidth.ts
@@ -25,8 +25,10 @@ const useChartContainerWidth = (
 
   const updateContainerWidth = (): void => {
     let widthValue;
-    if (typeof window !== undefined) widthValue = findContainerWidth(id);
-    if (widthValue) setWidth(widthValue);
+    if (typeof window !== undefined) {
+      widthValue = findContainerWidth(id);
+      setWidth(widthValue);
+    }
   };
   return width;
 };
diff --git a/src/lib/dot-matrix/custom-hooks/useDotMatrix.ts b/src/lib/dot-matrix/custom-hooks/useDotMatrix.ts
index fa2e88c..e861901 100644
--- a/src/lib/dot-matrix/custom-hooks/useDotMatrix.ts
+++ b/src/lib/dot-matrix/custom-hooks/useDotMatrix.ts
@@ -52,11 +52,12 @@ export const useDotMatrix = (
     const gradientDots: DotsType[] = [];
     for (let i = 0; i < currentDots.length - 1; i++) {
       if (isDecimal(currentDots[i])) {
-        let remainingDecimal = 1 - (currentDots[i] - Math.floor(currentDots[i]));
+        let remainingDecimal =
+          1 - (currentDots[i] - Math.floor(currentDots[i]));
         const gradientColors = [dotsWithColor[i].color];
         const percentage = [currentDots[i] - Math.floor(currentDots[i])];
         let j = i + 1;
-        while (remainingDecimal !== 0) {
+        while (remainingDecimal !== 0 && j < currentDots.length) {
           if (currentDots[j] >= remainingDecimal) {
             percentage.push(remainingDecimal);
             currentDots[j] = currentDots[j] - remainingDecimal;
@@ -73,7 +74,7 @@ export const useDotMatrix = (
         gradientDots.push({
           id: i,
           count: 1,
-          gradientColors: gradientColors ? gradientColors : [],
+          gradientColors: gradientColors,
           gradientPercentage: percentage
         });
       }
@@ -92,7 +93,7 @@ export const useDotMatrix = (
     }
     //merging both arrays and sorting it with respect to id
     return mergeAndSortById(gradientDots, singleDots);
-  }, [dataPoints, dimensions.rows,dimensions.columns]);
+  }, [dataPoints, dimensions.rows, dimensions.columns]);
 
   return dotsToBeMapped;
 };
diff --git a/src/lib/tests/dotMatrix.test.tsx b/src/lib/tests/dotMatrix.test.tsx
index f736f49..bdb13f9 100644
--- a/src/lib/tests/dotMatrix.test.tsx
+++ b/src/lib/tests/dotMatrix.test.tsx
@@ -2,12 +2,14 @@ import React from "react";
 import {
   render,
   queryByAttribute,
-  queryAllByAttribute
+  queryAllByAttribute,
+  renderHook
 } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
 import { DotMatrixPropType } from "../dot-matrix/types";
 import { getGradient, getStyles } from "../dot-matrix/utils/utils";
+import { useDotMatrix } from "../dot-matrix/custom-hooks/useDotMatrix";
 import { Elements } from "../dot-matrix/constants";
 import DotMatrix from "../dot-matrix";
 
@@ -119,7 +121,7 @@ test("getStyles util should return the style object for a specific element if av
   expect(result).toEqual(mockStyle);
 });
 
-it('should generate a valid linear gradient string', () => {
+test('should generate a valid linear gradient string', () => {
   const colors = ['red', 'blue', 'green']; 
   const percentages = [0.25, 0.5, 0.25];
 
@@ -130,3 +132,34 @@ it('should generate a valid linear gradient string', () => {
   expect(result).toBe(expectedOutput);
 });
 
+test('returns expected output for valid input', () => {
+  const dataPoints = [
+    { name: 'Point A', count: 5, color: 'red' },
+    { name: 'Point B', count: 10, color: 'blue' },
+    { name: 'Point B', count: 5, color: 'blue' },
+  ];
+
+  const dimensions = {
+    rows: 5,
+    columns: 6,
+  };
+
+  const { result } = renderHook(() => useDotMatrix(dataPoints, dimensions));
+  expect(result.current).toHaveLength(5);
+});
+
+test('returns expected output for valid input', () => {
+  const dataPoints = [
+    { name: 'Point A', count: 10, color: 'red' },
+    { name: 'Point B', count: 1, color: 'blue' },
+    { name: 'Point B', count: 10, color: 'yellow' },
+  ];
+
+  const dimensions = {
+    rows: 1,
+    columns: 1,
+  };
+
+  const { result } = renderHook(() => useDotMatrix(dataPoints, dimensions));
+  expect(result.current).toHaveLength(1);
+});