Next JS Image Does Not Work with Amazon AWS

Question

I have been trying to swap out tags to use NextJS Images for optimization. I am getting a 403 though when I try to load an image from this domain. I have already tried to add the domain to the next js config file but no luck. It works fine when I am using so I know it has to be a Next JS Image thing.

[censored]-[censored]-[censored]-[censored].s3.amazonaws.com

        alt="Member avatar"
        data-testid="avatar-image"
        width={95}
        wrapperClass={boundClassNames('my-4')}
        rounded
        src={url}
/>

import classNames from 'classnames/bind';
import Image from 'next/image';
import { ReactEventHandler, useState } from 'react';

import css from 'components/shared/DesignBasics/Images/NextImage.module.scss';

const boundClassNames = classNames.bind(css);

enum ImageLayoutVariations {
  FILL = 'fill',
  FIXED = 'fixed',
  INTRINSIC = 'intrinsic',
  RESPONSIVE = 'responsive',
}

enum ImageLoadingVariations {
  EAGER = 'eager',
  LAZY = 'lazy',
}

enum ImagePlaceHolderVariations {
  BLUR = 'blur',
  EMPTY = 'empty',
}

// https://nextjs.org/docs/pages/api-reference/components/image
export type NextImagePropsType = {
  src: string;
  alt?: string;
  blurDataURL?: string;
  defaultImage?: string;
  draggable?: boolean;
  // If height is only defined then we can assumed width is same
  height?: number | string;
  imageClass?: string;
  // If layout is defined as fill then width and height cannot be specified
  layout?: ImageLayoutVariations;
  loader?: ({ src, width, quality }) => string;
  loading?: ImageLoadingVariations;
  onError?: () => void;
  onLoad?: ReactEventHandler<HTMLImageElement>;
  placeholder?: ImagePlaceHolderVariations;
  priority?: boolean;
  quality?: string | number;
  rounded?: boolean;
  sizes?: string;
  style?: object;
  // If width is only defined then we can assumed height is same
  width?: number | string;
  wrapperClass?: string;
};

const NextImage = ({
  src,
  alt = '',
  blurDataURL,
  defaultImage = '',
  draggable = true,
  height,
  imageClass = '',
  layout,
  loader,
  loading,
  onError = () => {},
  onLoad,
  placeholder,
  priority = false,
  quality = 100,
  rounded = false,
  sizes,
  style,
  width,
  wrapperClass,
}: NextImagePropsType): JSX.Element => {
  const className = boundClassNames(imageClass, { 'border-radius-circular': rounded });

  const [error, setError] = useState(false);

  const getStyle = () => {
    return layout === ImageLayoutVariations.FILL ? { ...style, objectFit: 'cover' } : style;
  };

  const handleError = () => {
    setError(true);
    onError();
  };

  return (
    <div className={wrapperClass}>
      <Image
        alt={alt}
        blurDataURL={blurDataURL}
        className={className}
        draggable={draggable}
        height={height || width}
        layout={layout}
        loader={loader}
        loading={loading}
        onError={handleError}
        onLoad={onLoad}
        placeholder={placeholder}
        priority={priority}
        quality={quality}
        sizes={sizes}
        src={error && defaultImage ? defaultImage : src}
        style={getStyle()}
        width={width || height}
      />
    </div>
  );
};

export { ImageLayoutVariations, ImageLoadingVariations, ImagePlaceHolderVariations };
export default NextImage;