Cannot read properties of null (reading 'focus')

bonjour,

je me retrouve avec cette erreur "Cannot read properties of null (reading 'focus')" , après de multiples recherches je ne comprends pas d'où cela peut venir. J'utuilise la version 18 de React. 

Pourriez vous m'apporter de l'aide ?

import React, { useState, useEffect, useRef } from "react";
import "./App.css";
import styled from 'styled-components';

// Composants
import Eleve from "../../Components/Eleve/Eleve";
import MonComponentHoc from "../../HOC/MonComponentHoc/MonComponentHoc";

 // Css Avec styled component
 const BtnStyled = styled.button`
 padding: 10px 30px;
 background-color: ${props => props.transformed ? 'green' : 'black'};
 color: white;
 cursor: pointer;

 &:hover {
   background-color: ${props => props.transformed ? 'lightgreen' : 'white'};
   color: ${props => props.transformed ? 'white' : 'black'};;
 }
`;


function App() {
  // states
  const [eleves, setEleves] = useState([
    {
      id: "1",
      nom: "Eva Dupont",
      moyenne: 10,
      citation: "citation !",
    },
    {
      id: "2",
      nom: "Elon Musk",
      moyenne: 5,
      citation: "citation !",
    },
  ]);

  const [transformation, setTransformation] = useState(false);
  const [hide, setHide] = useState(true);

  // Etats
  useEffect(() => {
    console.log("[app.js] useEffect");

    return () => {
      console.log("[App.js] useEffect (didUnmount)");
    };
  }, []);

  useEffect(() => {
    console.log("[app.js] useEffect (didUpdate)");
  });

  // fonctions
  const buttonClickHandler = (newPrenom, index) => {
    const newEleves = [...eleves];
    newEleves[index].nom = newPrenom;
    setEleves(newEleves);
    setTransformation(true);
    inputElem.current.focus();
  };

  const btnHideClickHandler = () => {
    setHide(!hide)
  };

  const removeClickHandler = (index) => {
    // console.log(index);
    const newEleves = [...eleves];
    newEleves.splice(index, 1);
    setEleves(newEleves);
  };

  const nameChangeHandler = (e, index) => {
    const newEleves = [...eleves];
    newEleves[index].nom = e.target.value;
    setEleves(newEleves);
  };

  // Objet javascript pour utiliser du style par exemple
  // const h1Style = {
  //   color: "green",
  //   backgroundColor: "lightgreen",
  // };

  const inputElem = useRef(null);

  let cartes = eleves.map((eleve, index) => {

    let maVariableRef = null;
    if(index === 0) {
      maVariableRef = inputElem;
    };

    return (
      <Eleve
        key={index}
        nom={eleve.nom}
        moyenne={eleve.moyenne}
        click={() => buttonClickHandler("Léa", index)}
        remove={() => removeClickHandler(index)}
        changeName={(e) => {nameChangeHandler(e, index)}}
        maRef={maVariableRef}
      >
      {eleve.citation}
      </Eleve>
    );
  })

 

  // JSX
  return (
    <div className="App">
      <h1>Bienvenue dans la classe</h1>
      {/* <h1 style={h1Style} >Bienvenue dans la classe</h1> style venant de l'objet */}
      <div className="btn">

        <BtnStyled transformed={transformation} onClick={btnHideClickHandler}>
          Afficher / masquer
        </BtnStyled>

        
        <BtnStyled transformed={transformation} onClick={buttonClickHandler.bind(this, "Test", 0)}>
          changer 1er prenom
        </BtnStyled>
      </div>

      {hide ? 
      <MonComponentHoc>
        {cartes}
      </MonComponentHoc>
      : null}
      
    </div>
  );
}

export default App;