Array within JSON manipulation issues using map method

I am building a pokemon wiki-type page as a beginner project. I want to render out the pokemon's types from the json object I am getting via axios. However, I cannot seem to properly use the map method on the types array returned in the object.

Currently, I am trying to set the typesItem const to be the mapped <p> elements and then just slap that in my list of attributes.
I get this error however Pokemon.jsx:30 Uncaught TypeError: Cannot read properties of undefined (reading 'map'). So i think the error is in my line 30. and it's almost definitely because I'm messing up how to access certain parts of json objects.

Use this to view the json api https://pokeapi.co/

import React from "react";

import axios from "axios";
import "../styles/pokemon.css";

export default function Pokemon() {
  const [inputPokemon, setInputPokemon] = React.useState("");
  const [result, setResult] = React.useState({});

  function handleKeyDown(e) {
    if (e.key == "Enter") {
      fetchPokemon();
      setInputPokemon("");
    }
  }

  async function fetchPokemon() {
    try {
      const response = await axios.get(
        `https://pokeapi.co/api/v2/pokemon/${inputPokemon.toLowerCase()}`
      );

      setResult(response.data);
      //   console.log(response.data);
      console.log(result);
    } catch (error) {
      console.error(error);
    }
  }
  const typesItem = result.types.map((item) => <p>{item.type.name}</p>);

  return (
    <>
      <div className="pokemon-input-container">
        <h3>Search for Details about your Favorite Pokemon!</h3>
        <br></br>
        <input
          className="pokemon-input"
          type="text"
          placeholder="Input Pokemon Name"
          onChange={(e) => setInputPokemon(e.target.value)}
          onKeyDown={handleKeyDown}
          value={inputPokemon}
        />
      </div>
      <div className="pokemon-output-container">
        <div className="name">Name: {result.name}</div>
        <div className="type">Type: {typesItem}</div>
        <div className="weight">
          Weight: {result.weight} Height: {result.height}"
        </div>
        <div className="moves">Possible Moves: </div>
        <div className="stats">Stats:</div>
        <div className="abilities">Abilities: </div>
      </div>
    </>
  );
}

Short on time at the moment, but the below snippet should fix your issue (some comments contained within).

import React from "react";

import axios from "axios";
import "../styles/pokemon.css";

export default function Pokemon() {
  const [inputPokemon, setInputPokemon] = React.useState("");
  // use undefined instead of empty object (easier to run conditions on).
  const [result, setResult] = React.useState(undefined);

  function handleKeyDown(e) {
    if (e.key == "Enter") {
      fetchPokemon();
      setInputPokemon("");
    }
  }

  async function fetchPokemon() {
    try {
      const response = await axios.get(
        `https://pokeapi.co/api/v2/pokemon/${inputPokemon.toLowerCase()}`
      );

      setResult(response.data);
      //   console.log(response.data);
      console.log(result);
    } catch (error) {
      // When error clear data.
      setResult(undefined);
      console.error(error);
    }
  }

  return (
    <>
      <div className="pokemon-input-container">
        <h3>Search for Details about your Favorite Pokemon!</h3>
        <br></br>
        <input
          className="pokemon-input"
          type="text"
          placeholder="Input Pokemon Name"
          onChange={(e) => setInputPokemon(e.target.value)}
          onKeyDown={handleKeyDown}
          value={inputPokemon}
        />
      </div>
      {
        // check if result exists, if you are worried about result being a falsy value
        // that react will display slap two bangs on it (!!result) but if it's either undefined
        // or an object it shouldn't be a problem.
        //
        // Now nothing else will be run on result unless it has been populated, problem solved.
        result && (
          <div className="pokemon-output-container">
            <div className="name">Name: {result.name}</div>
            <div className="type">Type: {result.types.map((item) => <p>{item.type.name}</p>)}</div>
            <div className="weight">
              Weight: {result.weight} Height: {result.height}"
            </div>
            <div className="moves">Possible Moves: </div>
            <div className="stats">Stats:</div>
            <div className="abilities">Abilities: </div>
          </div>
        )
      }
    </>
  );
}

Try inserting this and tell me if it's outputting:

useEffect(()=>{
     console.log(result)
},[result])

If this is outputting undefined then something is wrong in your Database call

Ok, since there's a result, try this:

let typesItem=''
if(results) typesItem = result.types.map((item) => <p>{item.type.name}</p>)
console.log(typesItem)