[Dúvida] Uso do filtro react.js

Estou com dificuldade em encontrar o erro no meu código na parte do filter(), quando tento usar o "objeto.tipo" é dado como não identificado e quando vou usar o objeto.compiladosDeJogos some tudo.

  import { useState } from 'react';
import Banner from './componentes/Banner/Banner';
import Formulario from './componentes/Formulario';
import Jogos from './componentes/Jogos';


function App() {

  const [jogoAdd, setJogo] = useState([])

  const compiladosDeJogos = [
    {
      nome: "Tiro",
      corPrimaria: "#57c278",
      corSecundaria: "#D9f7e9"
    },
    {
      nome: "Ação",
      corPrimaria: "#82cffA",
      corSecundaria: "#E8F8FF"
    },
    {
      nome: "Aventura",
      corPrimaria: "#A6D157",
      corSecundaria: "#F0F8E2"
    },
    {
      nome: "CQB",
      corPrimaria: "#E06B69",
      corSecundaria: "#FDE7E8"
    },
    {
      nome: "Estratégia",
      corPrimaria: "#DB6EBF",
      corSecundaria: "#FAE9F5"
    },
    {
      nome: "História",
      corPrimaria: "#FFBA05",
      corSecundaria: "#FFF5D9"
    },
    {
      nome: "Lendário",
      corPrimaria: "#FF8A29",
      corSecundaria: "#FFEEDF"
    },

  ]

  const jogos = (jogo) =>{
    console.log(jogo)
    setJogo([...jogoAdd,jogo])
  }

  return (
    <div className="App">
      <Banner/>
      <Formulario tipoJogo={compiladosDeJogos.map(tipoJogo => tipoJogo.nome)} aoJogoCadastrado = {jogo =>jogos(jogo) }/>
      {compiladosDeJogos.map(compiladosDeJogos => 
        <Jogos 
          key={compiladosDeJogos.nome} 
          nome = {compiladosDeJogos.nome} 
          corPrimaria = {compiladosDeJogos.corPrimaria} 
          corSecundaria = {compiladosDeJogos.corSecundaria}
          jogoAdd={jogoAdd.filter(objeto => objeto.compiladosDeJogos === compiladosDeJogos.nome)}
        />
        )}     
    </div>
  );
}

export default App;

import CampoTexto from "../CampoTexto"
import "./formulario.css"
import ListaSuspensa from "../ListaSuspensa"
import Botao from "../Botao"
import { useState } from "react"

const Formulario = (props) =>{
    
    // hooks
    const [nome, setNome] = useState("")
    const [descricao, setDescricao] = useState("")
    const [imagem, setImagem] = useState("")
    const [tipodeJogo, setTipoJogo] = useState("")

    const aoSalvar = (evento) =>{
        evento.preventDefault()
        props.aoJogoCadastrado({
            nome,descricao,imagem,tipodeJogo
        })
    }
    return(
        <section className="formulario">
            <form onSubmit={aoSalvar}>
                <h2>Preencha os dados para criar o card do jogo</h2>
                <CampoTexto 
                    required={true} 
                    label="Nome do jogo" 
                    placeholder="Digite o nome do jogo"
                    valor={nome}
                    aoAlterado = {valor => setNome(valor)}
                />
                <CampoTexto 
                    required={true} 
                    label="Descrição" 
                    placeholder="Descreva sobre o jogo"
                    valor={descricao}
                    aoAlterado = {valor=>setDescricao(valor)}
                />
                <CampoTexto 
                    required={true} 
                    label="Imagem" 
                    placeholder="Endereço da imagem"
                    valor = {imagem}
                    aoAlterado = {valor => setImagem(valor)}
                />
                <ListaSuspensa 
                    required={true}
                    label="Tipo de jogo" 
                    item={props.tipoJogo}
                    valor={tipo}
                    aoAlterado = {valor => setTipoJogo(valor)}
                />
                <Botao>
                    Criar card
                </Botao>
            </form>
        </section> 
    )
}

export default Formulario