Component renders previous state

I’m running Expo 50 with react-native 0.73.4 and react-navigation 6.

In the following code, the components are not added after the content has been fetched from the API.

If I run a refresh using the refresh control, the previous state is shown. This happens elsewhere too, but I am using the same sort of pattern throughout the app.

const ChecklistScreen = ({ navigation, route }) => {
    const [checklists, setChecklists] = useState([]);
    const [isRefreshing, setIsRefreshing] = useState(false);

    const fetchChecklists = async () => {
        setIsRefreshing(true);

        setChecklists(await checklistRepository.getChecklists())
    }

    useEffect(() => {
        fetchChecklists();
    }, []);

    return (
        <ScrollView refreshControl={
            <RefreshControl refreshing={! isRefreshing} onRefresh={fetchChecklists}
        }>
            { checklists.map((checklist) => {
                <Text>{checklist.name}</Text>
            }) }
        </ScrollView>
    );
};

It is like my state is always one behind what I’m expecting.