react ref is trying to reference a previously rendered dom

function App() {

  const [array, setArray] = useState(null);
  const refs = useRef(null);
  console.log(array);
  console.log(refs.current);

  const onToggle = () => {
    setArray((array) => {
      if (array == null) {
        refs.current = [{}];
        return [{ input1: "", input2: "" }];
      } else {
        refs.current = null;
        //refs.current = [{}];
        return null;
      }
    });
  };

  const onAdd = () => {
    setArray(array => {
      if (array.length === 2) return array;

      refs.current.push({});
      return [...array, { input1: "", input2: "" }];
    })
  }

  const onDelete = (i) => {
    setArray((preArray) => {
      const array = [...preArray];
      array.splice(i, 1);
      refs.current.splice(i, 1);
      return array;
    })
  }

  return (
    <>
      <div>
        <button onClick={onToggle}>{array ? "off" : "on"}</button>
        {array && <button onClick={onAdd}>add</button>}
      </div>
      {
        array && (
          array.map((arr,i) => (
            <div key={i}>
              <input ref={el => refs.current[i]["input1"] = el}/>
              <input ref={el => refs.current[i]["input2"] = el}/>
              <button onClick={() => onDelete(i)}>delete</button>
            </div>
          ))
        )
      }
    </>
  )
}

I'm trying to give a ref to an input that is created and cleared dynamically and give it focus if the validity is invalid. So, pressing the add button adds one to the ref array, and pressing the delete button deletes one from the ref array.

When the on button is pressed, it becomes as follows. array: [{input1: '', input2: ''}] refs: [{input1: input, input2: input}]

I thought it would be something like this when I hit the delete button. array: [] refs: []

However, the actual value becomes: array: [] refs: [{input1: null, input2: null}]

Why do refs have values ​​even when not rendering?