React native can't toggle state

Whenever I call the toggle function the boolean it checks is the same which means it never truly toggles. Assuming its something to do with binding to the current value and never getting the updated value, but I'm not sure what I am supposed to do.

Here is my provider (EDITED):

import React, { createContext, useState, useCallback } from 'react';
import { Animated } from 'react-native';

type positionStyle = 'absolute' | 'relative';

export interface ITabControlService {
    animatedHeight: Animated.Value,
    positionStyle: positionStyle,
    toggle(absolute?: boolean): void,
    close(absolute?: boolean): void,
    open(): void,
}

const emptyTabControlService: ITabControlService = {
    animatedHeight: new Animated.Value(65),
    positionStyle: 'absolute',
    toggle: (absolute?: boolean) => undefined,
    close: (absolute?: boolean) => undefined,
    open: () => undefined,
};

export const TabControlContext = createContext<ITabControlService>(emptyTabControlService);


const TabControlProvider: React.FC = ({ children }) => {
    const [animatedHeight] = useState(new Animated.Value(0));  // Initial value for opacity: 0
    const [positionStyle, setPositionStyle] = useState<positionStyle>('absolute');
    const [drawerOpen, setDrawerOpen] = useState(true);

    const toggle = useCallback((absolute: boolean = true) => {
        console.log('in context and drawer is ' + drawerOpen);
        if (drawerOpen) {
            open(absolute);
        }
        else {
            close();
        }
    }, [drawerOpen]);

    const close = useCallback(() => {
        console.log('closing drawer');
        setDrawerOpen(false);
        setPositionStyle('absolute')
        Animated.timing(
            animatedHeight,
            {
                toValue: -75,
                duration: 500,
            }
        ).start();
    },[setDrawerOpen]);

    const open = useCallback((absolute: boolean = true) => {
        console.log('opening drawer');
        setDrawerOpen(true);
        setPositionStyle('absolute');
        Animated.timing(
            animatedHeight,
            {
                toValue: 0,
                duration: 500,
            }
        ).start(() => absolute ? setPositionStyle('absolute') : setPositionStyle('relative'));
    },[setDrawerOpen]);

    return <TabControlContext.Provider value={{
        animatedHeight: animatedHeight,
        positionStyle: positionStyle,
        toggle: toggle,
        close: close,
        open: open,
    }}>
        {children}
    </TabControlContext.Provider>
}

export default TabControlProvider

I can see in the logs that the same booelan is read even though toggle calls the function which then calls the setState method. clearly there is something fundemenal I am not understanding.

Any tips/hints suggestions would be much appreciated.