React Context value doesn't change - reactjs

Question

I just finished working on a custom Context Provider and I came across a problem. The context isn't getting updated with the data from the function inside of it. It just stays the same (as specified default value).
I'm not really sure what the bug is :/
Here's the code:
useBreakpoints.tsx
// Functions
import { createContext } from 'react';
// Hooks
import { useContext, useEffect, useState } from 'react';
// Types
import type { ReactNode } from 'react';
type Width = number | undefined;
interface Breakpoints {
[key: number | string]: number;
}
interface Values {
[key: number | string]: boolean;
}
interface IProps {
children: ReactNode;
breakpoints: Breakpoints;
}
// Context
export const BreakpointsContext = createContext({});
export const BreakpointsProvider = ({ children, breakpoints }: IProps) => {
const [width, setWidth] = useState<Width>(undefined);
const [values, setValues] = useState<Values | undefined>(undefined);
useEffect(() => {
if (typeof window !== 'undefined') {
const handleResize = () => {
setWidth(window.innerWidth);
};
window.addEventListener('resize', handleResize);
handleResize();
return () =>
window.removeEventListener('resize', () => {
handleResize();
});
}
}, []);
useEffect(() => {
if (width !== undefined) {
const handleValues = () => {
Object.keys(breakpoints).forEach((breakpoint, index) => {
setValues((prev) => ({
...prev,
[breakpoint]: width >= Object.values(breakpoints)[index],
}));
});
};
handleValues();
return () => window.removeEventListener('resize', handleValues);
}
}, [width]);
const exposed = {
width,
values,
};
return <BreakpointsContext.Provider value={exposed}>{children}</BreakpointsContext.Provider>;
};
export const useBreakpoints = () => useContext(BreakpointsContext);
export default BreakpointsProvider;
_app.tsx
// Providers
import { ThemeProvider } from 'next-themes';
import BreakpointsProvider from '../hooks/useBreakpoints';
// Variables
import { Style } from '#master/css';
// Styles
import '#master/normal.css';
import '../styles/master.css';
// Types
import { ReactElement, ReactNode } from 'react';
import type { NextPage } from 'next';
import type { AppProps } from 'next/app';
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode;
};
interface AppPropsWithLayout extends AppProps {
Component: NextPageWithLayout;
}
function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout ?? ((page) => page);
return getLayout(
<ThemeProvider themes={Style.colorSchemes} attribute="class">
<BreakpointsProvider breakpoints={Style.breakpoints}>
<Component {...pageProps} />
</BreakpointsProvider>
</ThemeProvider>
);
}
export default MyApp;
Then I call it inside of a component like this
const test = useBreakpoints();
console.log(test);
I am working with NextJS, if that changes anything.