I'm displaying the coords of where the mouse is on the screen, only it appears the coordinates are centered such that the x-axis is negative and the y-axis is positive (0, 0 is at the bottom right of the map). Preferrably I'd have both x and y axis's positive (0, 0 is bottom-left of the screen), but I can't for the life of me figure out what controls this.

Here's my code (for the component in a react function wrapper):

const MapWrapper : React.FC<IMapWrapper> = () => {
    const [map, setMap] = useState<Map>();
    const mapElement = useRef<HTMLDivElement>(null);
    const mapRef = useRef<Map>();
    mapRef.current = map;

    const mousePositionElement = useRef<HTMLDivElement>(null);
    const mousePositionControl = new MousePosition({
        coordinateFormat: createStringXY(4),
        target: mousePositionElement.current?.id  || undefined,
        className: 'custom-mouse-position',
    })

    useEffect(() => {
        const map = new Map({
            controls: defaultControls().extend([mousePositionControl]),
            target: mapElement.current || undefined,
            layers: [
                new TileLayer({
                    source: new XYZ({
                        url: ".../{z}/{x}/{y}.jpg",
                        minZoom: 8,
                        maxZoom: 16,
                    })
                }),
            ],

            view: new View({
                center: [0, 0],
                zoom: 12.5,
                maxZoom: 16,
                minZoom: 8,

            }),
        });
        setMap(map);
    }, []);

    return (
        <>
            <div style={{height:'100vh',width:'100%', "background": "black"}} ref={mapElement} className="map-container">
            </div>
            <div id="mouse-position" ref={mousePositionElement}  />
        </>

    );
}

So default it's using the projection EPSG:3857, I've also tried EPSG:4326 and a custom proj4 one, but I'm not sure it's related to that - it seems to change the scaling but not the direction.

Something important to note is for the map tiles I'm using, I had to switch the standard {z}/{y}/{x} to {z}/{x}/{y}. Not sure if this could have an effect?

Any ideas would be helpful!