Uncaught TypeError: (0 , _sanity_client__WEBPACK_IMPORTED_MODULE_0__.sanityClient) is not a function

I'm trying to fetch data from Sanity into my react app for the first time. At the moment, I'm trying something small, so I have a schema called website_images, that has an image type called about and a separate string for alt.

In the tutorial video I'm watching, she said she is using GROQ to do this. I'm getting this error message though:

Uncaught TypeError: (0 , _sanity_client__WEBPACK_IMPORTED_MODULE_0__.sanityClient) is not a function

I've followed her instructions with sanityClient as well, but the video is from 2020 so I'm not sure if something is outdated or if I'm doing it wrong?

Here is my client.js that the error message has referred to:

import { sanityClient } from "@sanity/client";

export default sanityClient({
    projectId: "55oqiw61",
    dataset: "production"
})

And my about.js file where I'm trying to fetch the data:

import React, { useState, useEffect }from 'react';
import './about.css'
import sanityClient from '../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>
    )
}

Things to note: I haven't run npm deploy sanity yet, not sure when I should. Also, I have tried using the imageUrlBuilder method instead, and have gotten the same error message so I assume the problem is just with my client.js file?