So I have the following code, where I'm fetching data to be rendered in my component. However, if the useEffect is set to run once, it wont render the data inside the component, and having it constantly running is not sustainable.

```js
import React, { useState, useEffect } from "react";
import Chart from "react-google-charts";

const Bottom5 = ({ company }) => {
    const [quiz, setQuiz] = useState('');
    const [dataPoints, setDatapoints] = useState([]);

    useEffect(() => {
            var resultData = [];
            fetch(`http://localhost:3001/company/dashboard/bottom5/${company}`)
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                for (var i = 0; i < data.length; i++) {
                    resultData.push({
                        label: data[i].name,
                        y: data[i].sumCorrect
                    });
                }
               setDatapoints(resultData)
            });
    },[])

    return (
            <Chart style={{display:"inline-block"}}
                width={'500px'}
                height={'300px'}
                chartType="ColumnChart"
                loader={<div>Loading Chart</div>}
                data={[
                    ['Names', 'Result'],
                    ...dataPoints.map(d => [d.label, d.y])
                ]}
                options={{
                    title: 'CyberSecurity Bottom 5',
                    chartArea: { width: '50%' },
                    hAxis: {
                        title: 'Employees',
                        minValue: 0,
                    },
                    vAxis: {
                        title: 'Total Correct',
                    },
                }}
                // For tests
                rootProps={{ 'data-testid': '1' }}
            />
    )
}

export default Bottom5;
```