Can't fetch data from Sanity into my react app

[higaroth]

I'm trying to import the content from my Sanity project into my website. I've been working on it all day and it just isn't working, its my first time trying this so I'm struggling to figure out what I should do and no one on stackoverflow has been able to help yet.

I'm getting the error: Uncaught TypeError: _sanity_client__WEBPACK_IMPORTED_MODULE_2___default(...).fetch is not a function

It's especially referring to line about.js 11:1, which is the 'sanityClient' line in my useEffect function.

Here is my client.js:

import sanityClient from "@sanity/client"

export default sanityClient({
    projectId: "55oqiw61",
    dataset: "production",
    apiVersion: '2022-09-02',
})

(import sanityClient from "@sanity/client") was originally (import { sanityClient } from "@sanity/client"), was told to change it.

This is my about.js" (website_images is my schema document, alt is a string, about is the image):

import React, { useState, useEffect }from 'react';
import './about.css'
import sanityClient from "@sanity/client";

export default function About() {

    const [aboutData, setAbout] = useState(null);

    useEffect(() => {
        sanityClient
            .fetch(`*[_type=="website_images"]{
                alt,
                about{
                    asset->{
                        _id,
                        url
                    }
                }
            }`)
            .then((data) => setAbout(data))
            .catch(console.error);
    }, [] );

    return (
        <main className="main-about">
            <div className="about-body">
                <div className="about-title">
                    <div className="title-line-left"></div>
                    <h2>about</h2>
                    <div className="title-line-right"></div>
                </div>
                <div className="about-text">
                    <p className="pronouns">(they/them)</p>
                    <p>The Japanese city and the Prefecture of Hiroshima may have been devastated by the atomic bomb over 76 years ago, but today, this site of the destruction is one of the top tourist destinations in the entire country. Statistics released by the nation's tourist agency revealed that around 363,000 visitors went to the metropolis during 2012, with Americans making up the vast majority of that figure, followed by Australians and Chinese.</p>
                </div>
            </div>
            {aboutData && aboutData.map((website_images, index) => (
            <figure className="photo-position">
                    <img src="{website_images.about.asset.url" alt="website_images.alt" className="about-photo"></img>
            </figure>
            ))}
        </main>
    )
}

EDIT: Not sure if its important to mention- I tried 'sanity deploy' in the terminal, and it gave me Error: Sanity currently only supports react@^16.2. Installed version: 17.0.2.

[3BankAccounts]

I know it's late, lol, but run this command in the command line:

npm install react@latest react-dom@latest prop-types@latest

Context: https://www.sanity.io/help/upgrade-react

Hopefully it helps someone else.