React Integration setup - page content always coming back not found

[nickynack338]

Builder public api key
70d9696faf234209b49f80ea1c2def6f

What are you trying to accomplish
I want to integrate builder with a page (any page) in my app. I’ve gone through the page integration docs and tried to insert the builder component into a few different components. The components I’ve been inserting them into are all high level components that wrap multiple pages in my app.

Every time I run my app the value of content is coming up undefined, and the ‘Not Found’ div is being rendered. When window.location.pathname is being printed correctly, why is content still coming up undefined?

Screenshots or video link

Code stack you are integrating Builder with
React 18, npm 8, React Router (custom version of v1.0)

Reproducible code example

builder.init('70d9696faf234209b49f80ea1c2def6f');

const AppChrome = forwardRef<HTMLDivElement, AnyObject>(function AppChrome(props: AnyObject, ref) {

    useEffect(() => {
        const { AppActions } = Flux.actions;
        AppActions.loadUserProfile();
        AppActions.getAccount(props.currentAccountUuid);
    }, [props.currentAccountUuid]);

    const isPreviewingInBuilder = useIsPreviewing();
    const [notFound, setNotFound] = useState(false);
    const [content, setContent] = useState(undefined);

    useEffect(() => {
        async function fetchContent() {
            const content = await builder
                .get('page', {
                    url: window.location.pathname,
                })
                .promise();

            console.log('content: ', content);
            console.log('pathname: ', window.location.pathname);

            setContent(content);
            setNotFound(!content);

            if (content?.data.title) {
                document.title = content.data.title;
            }
        }
        fetchContent();
    }, [window.location.pathname]);


    if (notFound && !isPreviewingInBuilder) {
        return <div>NOT FOUND</div>;
    }

    return (
        <>
            <BuilderComponent model="page" content={content} />
            <AppLayout {...props} />
        </>
    );
});

export default AppChrome;