From 30ede5716da0843562604af17fe567b6d8ba3eac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <maluenarod@gmail.com>
Date: Thu, 13 Jun 2024 09:11:50 +0200
Subject: [PATCH] fix species triangle

---
 src/containers/datasets/species-distribution/widget.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/containers/datasets/species-distribution/widget.tsx b/src/containers/datasets/species-distribution/widget.tsx
index 9ffe20951..9933e6d88 100644
--- a/src/containers/datasets/species-distribution/widget.tsx
+++ b/src/containers/datasets/species-distribution/widget.tsx
@@ -27,11 +27,12 @@ const SpeciesDistribution = () => {
   } = useMangroveSpecies();
 
   const isWorldwide = location === 'Worldwide';
-  // const total = data?.total;
-  const ref = useRef<HTMLDivElement>(null);
+
+  const ref = createRef<HTMLDivElement>();
   const trianglePosition = (total * lineChartWidth) / worldwideTotal - 11; // substract icon size
+
   // fires synchronously after all DOM mutations.
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (ref && ref.current && ref.current.offsetWidth) {
       setLineChartWidth(ref?.current?.offsetWidth);
     }