Reactjs – I'm getting an error when importing 'useUpdateUser' in my React component. Can you help me troubleshooot?

The error message is ‘Uncaught SyntaxError: The requested module ‘/src/features/authentication/useUpdateUser.js’ does not provide an export named ‘useUpdateUser’ (at UpdateUserDataForm.jsx:10:10)’

Here is my useUpdateUser.js

import { useState } from 'react';
import { toast } from "react-hot-toast";

export const useUpdateUser = () => {
  const [isUpdating, setIsUpdating] = useState(false);

  const updateUser = async (data, { onSuccess }) => {
    setIsUpdating(true);
    try {
      const response = await fetch('/api/update-password', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });

      if (!response.ok) {
        throw new Error('Failed to update password');
      }

      onSuccess();
      toast.success('User account successfully updated');
    } catch (error) {
      console.error(error);
    } finally {
      setIsUpdating(false);
    }
  };

  return { updateUser, isUpdating };
};

Here is my useUpdatePasswordForm.jsx

import { useState } from "react";

import Button from "../../ui/Button";
import FileInput from "../../ui/FileInput";
import Form from "../../ui/Form";
import FormRow from "../../ui/FormRow";
import Input from "../../ui/Input";

import { useUser } from "./useUser";
import { useUpdateUser } from "./useUpdateUser";

const UpdateUserDataForm = () => {
  const { user } = useUser();
  const { updateUser, isUpdating } = useUpdateUser();

  const email = user?.email || "";
  const currentFullName = user?.user_metadata?.fullName || "";

  const [avatar, setAvatar] = useState(null);
  const [fullName, setFullName] = useState(currentFullName);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!fullName) return;
    const data = { fullName, avatar };
    updateUser(data, { onSuccess: () => console.log("Update successful") });
  };

  return (
    <Form onSubmit={handleSubmit}>
      <FormRow label="Email address">
        <Input type="email" value={email} disabled />
      </FormRow>
      <FormRow label="Full name">
        <Input
          type="text"
          value={fullName}
          onChange={(e) => setFullName(e.target.value)}
          id="fullName"
          disabled={isUpdating}
        />
      </FormRow>
      <FormRow label="Avatar">
        <FileInput onChange={(e) => setAvatar(e.target.files[0])} />
      </FormRow>
      <Button type="submit" disabled={isUpdating}>
        {isUpdating ? "Updating..." : "Update"}
      </Button>
    </Form>
  );
};

export default UpdateUserDataForm; 

My app was rendering just fine until this error showed up. Not many solutions at my disposal, I’ve had aplay around with adding/removing default also.