I have my code set up like this with two folders one backend_sanity and the other frontend_react and i can not get the sanity to link to my react front end without blanking the entire webpage on localhost:3000. I have tried re coding everything three times now and it still doesnt work? I have followed the tutorial to a T and it just wont work.

import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

import { urlFor, client } from '../../client';

import { images } from '../../constants'

import './About.scss';



const About = () => {
    const [abouts, setAbouts] = useState([]);

    useEffect(() => {
        const query = '*[_type == "abouts"]';

        client.fetch(query)
            .then((data) => setAbouts(data));
    }, []);
    
    return (
        <> 
            <h2 className="head-text">I Know That <span>Good Development</span> <br /> Means <span>Good Business</span>
            </h2>

            <div className="app__profiles">
                {abouts.map((about, index) => (
                    <motion.div
                        whileInView={{ opacity: 1 }}
                        whileHover={{ scale: 1.1 }}
                        transition={{ duration: 0.5, type: 'tween' }}
                        className="app__profile-item"
                        key={ about.title + index }
                    >
                        <img src={urlFor(about.imgUrl)} alt={about.title} />
                        <h2 className="bold-text" style={{ marginTop: 20 }}>{ about.title }</h2>
                        <p className="p-text" style={{ marginTop: 10 }}>{ about.description }</p>
                    </motion.div>
                ))}
            </div>
        </>
    );
};

export default About;```



```import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

export const client = sanityClient({
    projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
    dataset: 'production',
    apiVersion: '2022-02-01',
    useCdn: true,
    token: process.env.REACT_APP_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);```