Tengo mi código configurado de esta manera con dos carpetas, una backend_sanity y la otra frontend_react y no puedo obtener la cordura para vincular mi interfaz de reacción sin borrar toda la página web en localhost: 3000. ¿He intentado volver a codificar todo tres veces y todavía no funciona? He seguido el tutorial al pie de la letra y simplemente no funciona.

 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);```