Base64 image in new tab wont render unless refreshed

I’m trying to render an image from my API to a new tab. I do this by getting the image in Base64 encoding, then using the “data:image/…” method. When I press a link to any image a blank window opens. But once I reload the tab the image renders properly. I want the image to load as soon as I open the new tab.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

interface Note {
  id: string,
  fileName: string,
  file: string // Base64
}

interface Props {}

const Notes = (props: Props) => {
  const [notes, setNotes] = useState<Note[]>([]);

  useEffect(() => {
    const fetchNotes = async () => {
      try {
        const res = await axios.get<Note[]>('http://localhost:8080/notes');
        setNotes(res.data);
        console.log(res.data);
      } catch (error) {
        console.error('Error:', error);
      }
    };
    fetchNotes();
  }, []);


  return (
    <div>
      <h1>Notes</h1>
      {notes.map((note,index) => (
        <div key={index}>
          <a href={`data:image/png;base64,${note.file}`} target='_blank'>
          {note.fileName}
          </a>
        </div>
      ))}
    </div>
  );
};

export default Notes;