How to get episode name where the character appeared for the first time? (Rick&Morty api)

I’m trying to create Rick&Morty page like the original Rick&Morty-api

But I have problems with the First seen in: line , where you can see on which episode the character appeared for the first time.

My code below, I’ve used useEffect to get all characters and rendered them. It was the easest part, but I don’t understand how to get name of episodes , where character appears for the 1st time. And It should work on each page, when I change my page by my pagination. Maybe I should match episodes id with characters id. I really want to work out this problem.
So please direct me somehow:)

import {
  Card,
  CardContent,
  CardMedia,
  Container,
  Pagination,
  Typography,
} from "@mui/material";
import { Box } from "@mui/system";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

export function RickAndMorty() {
  const [characters, setCharacters] = useState([]);
  const [episodes, setEpisodes] = useState([]);
  const [totalPages, setTotalPages] = useState(0);
  let [page, setPage] = useState(1);
  let [episodePage, setEpisodePage] = useState(1);

  useEffect(() => {
    getAllCharacters();
  }, [page]);

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


  function getAllEpisodes() {
    fetch(`https://rickandmortyapi.com/api/episode/?page=${episodePage}`)
      .then((res) => res.json())
      .then((data) => setEpisodes(data.info));
  }

 /*  function changeEpisodesPage() {
    if(episodes.next !== null) setEpisodePage(episodes.next);
    else if(episodes.prev !== null) setEpisodePage(episodes.prev);
  } */

  function getAllCharacters() {
    fetch(`https://rickandmortyapi.com/api/character/?page=${page}`)
      .then((res) => res.json())
      .then((data) => {
        setCharacters(data.results);
        setTotalPages(data.info.pages);
      });
  }

  
  
  return (
    <Container style={{ padding: 40 }} maxWidth="xl">
      <Container style={{ maxWidth: 1280 }}>
        <div>
          <h1
            style={{
              margin: 0,
              marginBottom: 40,
              fontSize: 100,
              fontWeight: 800,
              textAlign: "center",
              color: "rgb(32, 35, 41)",
            }}
          >
            The Rick and Morty
          </h1>
          <ul className="characters_list">
            {characters.map((character, index) => (
              <Card
                sx={{
                  display: "flex",
                  maxWidth: 600,
                  height: 220,
                  flexGrow: 1,
                }}
                key={index}
              >
                <CardMedia
                  component="img"
                  sx={{ width: 230 }}
                  image={character.image}
                  alt="Live from space album cover"
                />
                <Box
                  sx={{ display: "flex", flexDirection: "column", flexGrow: 1 }}
                >
                  <CardContent
                    className="character_card_content"
                    sx={{
                      flex: "1 0 auto",
                      backgroundColor: "rgb(60, 62, 68)",
                    }}
                  >
                    <Typography component="div" variant="h5">
                      <Link to={"/movies/"}>
                        <h2 className="character_title">{character.name}</h2>
                      </Link>
                    </Typography>
                    <Typography
                      fontFamily="Segoe UI"
                      color="white"
                      component="div"
                    >
                      <span className="character_status">
                        <span
                          className="status_icon"
                          style={{
                            backgroundColor:
                              character.status === "Alive"
                                ? "rgb(85, 204, 68)"
                                : character.status === "Dead"
                                ? "rgb(214, 61, 46)"
                                : "rgb(158, 158, 158)",
                          }}
                        ></span>
                        {character.status} - {character.species}
                      </span>
                      <Typography
                        fontFamily="Segoe UI"
                        fontWeight={500}
                        color="rgb(158, 158, 158)"
                        component="div"
                        marginTop={2}
                      >
                        <span>Last known location:</span>
                        <h3 className="character_location">
                          {character.location.name}
                        </h3>
                        <div style={{ marginTop: 16 }}>
                          <span>First seen in:</span>
                            <h3 className="character_location">
                             {character.episode[0].match(/d+/)}
                            </h3>
                        </div>
                      </Typography>
                    </Typography>
                  </CardContent>
                </Box>
              </Card>
            ))}
          </ul>
        </div>
        <Pagination
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
          count={totalPages}
          page={page}
          shape="rounded"
          onChange={(e, page) => setPage(page)}
        />
      </Container>
    </Container>
  );
}