bug 🪲: (created in this branch)

index.js:1 Warning: Cannot update a component (`SpeechTextComponent`) while rendering a different component (`_c`).

*NOTE `_c` is the SpeechboxArrow component

fix 🛠️:
only set the `arrowWidth` state after component has been created using the `useEffect` hook

frontend/src/components/SpeechboxArrow.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Triangle from "components/Triangle";
 
 const SpeechTextboxArrow = React.memo(({ borderWidth, setArrowWidth }) => {
@@ -43,7 +43,9 @@ const SpeechTextboxArrow = React.memo(({ borderWidth, setArrowWidth }) => {
 
   const borderTriangleWidth = calculateBorderTriangleWidth();
   const borderTriangleHeight = calculateBorderTriangleHeight();
-  setArrowWidth(borderTriangleWidth);
+  useEffect(() => {
+    setArrowWidth(borderTriangleWidth);
+  }, []);
 
   return (
     <div