How to display images from a JSON URL array in React

const pokesData = pokemons.map(pokemon => `${pokemon.img} ${pokemon.num} ${pokemon.name} ${pokemon.type}`)

This line of code would return "image url number name", what you actually want is the real image which requires the use of the img HTML tag. Implementing this with your code, it would become:

export default function Pokes() {

  const [pokemonData, setPokemonData] = React.useState({});

  React.useEffect(() => {
    fetch(
      "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json"
    )
      .then((res) => res.json())
      .then((data) => setPokemonData(data.pokemon));
  }, []);

  const allPokes = pokemonData;
  const pokemons = Object.values(allPokes);

  let renderedOutput = pokemons.map(pokemon => <div className="infodiv" style={{ flex: 1, flexBasis: "33%" }}>  <img src={pokemon.img} /> {pokemon.num} {pokemon.name}  </div>)
// Note the code change above ^^^

 return (
        <main>
          <div>
         
            <div style={{ display: "flex", flexWrap: "wrap" }}>{renderedOutput}</div>
           
          </div>
        </main>
      );

}

Here is the solution if that is what you are looking after. Here is codesandbox for below code;

import { useState, useEffect, useCallback } from "react";
import axios from "axios";

const URI =
  "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json";

const App = () => {
  const [values, setValues] = useState([]);

  const getPokomonGo = useCallback(async () => {
    try {
      const { data } = await axios.get(URI);
      if (data) setValues(data?.pokemon);
    } catch (err) {
      console.log({ err });
    }
  }, []);

  useEffect(() => {
    getPokomonGo();
  }, [getPokomonGo]);

  return (
    <div className="App">
      <h1>Pokemon Images</h1>
      {values &&
        values.map(({ num, name, img }) => (
          <img src={img} alt={name} key={num} />
        ))}
    </div>
  );
};

export default App;