Since you were using the async you must have to use await keyword , otherwise it will return promises,and you should use the function inside the useEffect 

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios";
import { profilePicRoute } from "../utils/apiRoutes";
import { Buffer } from "buffer";

function ProfilePic() {
  const api = "https://api.multiavatar.com";
  const navigate = useNavigate();
  const [profilePic, setProfilePic] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedPofilePic, setSelectedPofilePic] = useState(undefined);

  const toastStyles = {
    position: "top-center"
  };

  useEffect(() => {
    const setProfilePicture = async () => {
      const data = [];
      for (let i = 0; i < 4; i++) {
        const image = await axios.get(
          `${api}/${Math.round(Math.random() * 1000)}`
        );
        console.log(image);
        const buffer = Buffer(image.data);
        data.push(buffer.toString("base64"));
      }
      setProfilePic(data);
      setIsLoading(false);
    };
    setProfilePicture();
  }, []);

  return (
    <div className="profilePage">
      <h1>Pick your favorite profile picture</h1>
      <div className="profilePics">
        {profilePic.map((pic, index) => {
          return (
            <div
              key={index}
              className={`pic ${selectedPofilePic === index ? "selected" : ""}`}
            >
              <img
                src={`data:image/svg+xml;base64,${pic}`}
                alt="profile pic"
                onClick={() => setSelectedPofilePic(index)}
              />
            </div>
          );
        })}
      </div>
      <ToastContainer />
    </div>
  );
}

export default ProfilePic;

Hope this code will help you.
Happy Coding :)