SetState hook does not render the data after a timeout - reactjs

Question

My data is not shown when the app launches. It only shows when I tried to inspect the page.
I am reading JSON data that make take some time to be available. So, I added a async/await.
How do I fix my code so it displays on load?
Here is a snippet of my code:
const WeatherWidget = ({ id, editMode }) => {
const [roles, setRoles] = useState();
const getGoalData = async () => {
return (
[
{
"username": "user1",
"goal": "$5,000,200"
},
{
"username": "user2",
"goal": "$5,000,200"
},
{
"username": "user3",
"goal": "$4,000,199"
},
]
);
}
useEffect(() => {
const setDataRole = async () => {
var json = await getGoalData();
setRoles(json)
}
setDataRole();
}, [])
return (
<Container>
<div>
ticker from widget config
</div>
<StyledUl>
<Ticker>
{({ index }) => (
<>
{roles && roles.map(({ username, goal }, i) => (
<>
{i === 0 ? null : ','}
<StyledSpanName>
<span className="name">{username}</span>
</StyledSpanName>
<StyledSpanGoal> <span className="goal">{goal}</span></StyledSpanGoal>
</>
))
}
</>
)}
</Ticker>
</StyledUl>
</Container>
);
};

Answer 1

You don't need to load anything. The data is right there in the code. Just put it in roles right from the start.
In fact, you don't even need to use useState, since you never mutate the roles state. It could (and probably should) be a constant.
const WeatherWidget = ({ id, editMode }) => {
const [roles, setRoles] = useState(
[
{
"username": "user1",
"goal": "$5,000,200"
},
{
"username": "user2",
"goal": "$5,000,200"
},
{
"username": "user3",
"goal": "$4,000,199"
},
]
);
return (
<Container>
<div>
ticker from widget config
</div>
<StyledUl>
<Ticker>
{({ index }) => (
<>
{roles && roles.map(({ username, goal }, i) => (
<>
{i === 0 ? null : ','}
<StyledSpanName>
<span className="name">{username}</span>
</StyledSpanName>
<StyledSpanGoal> <span className="goal">{goal}</span></StyledSpanGoal>
</>
))
}
</>
)}
</Ticker>
</StyledUl>
</Container>
);
};

Answer 2

Seems like you forgot async:
useEffect(() => {
const setDataRole = async () => { // here
var res = await getGoalData()
var data = await res.json()
setRoles(data)
}
setDataRole();
}, [])