CodeSandbox

You need to convert ValorMaximo and ValorMinimo from strings into numbers.

import React, { useState } from 'react';
import './style.css';

export default function PaginaInicial() {
  const [numeroAleatorio, setNumeroAleatorio] = useState(0);
  const [ValorMax, setValorMax] = useState(100);
  const [ValorMin, setValorMin] = useState(0);

  function BotaoMax() {
    var ValorMaximo = document.getElementById('max').value
    // Convert to number
    setValorMax(Number(ValorMaximo));

  };
  function BotaoMin() {
    var ValorMinimo = document.getElementById('min').value
    // Convert to number
    setValorMin(Number(ValorMinimo));
  };
  function gerarNumero() {
    const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin;
    setNumeroAleatorio(newNumber);
    if (ValorMax < ValorMin) {
      alert('Max value should be higher than Min value')
      setNumeroAleatorio('Error')
    };
  };

  return (
    <div className="conteudo-centralizado">
      <h3>Random Number:</h3>
      <div className="divNum">
      </div>

      <div>
        <input type="number" id='min' min='1' max='9999' placeholder="Número Mínimo" onChange={BotaoMin} />
        <input type="number" id='max' min='1' max='9999' placeholder="Número Máximo" onChange={BotaoMax} />
      </div>
      <h1>{numeroAleatorio}</h1>

      <div className='area-botao'>
        <label>
          Click on the following button to get a random number:
        </label>

        <button onClick={gerarNumero}>
          Generate Number
        </button>
      </div>
    </div>
  );
}

named functions in react are not reactive , that is they are evaluated once , if that function is referencing a value outside the functions scope it would only use the initial value of that variable if the variable is updated the function would not be re-initialized

so genrarNmero function

function gerarNumero() {
  const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin;
  setNumeroAleatorio(newNumber);
  if (ValorMax < ValorMin) {
    alert('Max value should be higher than Min value');
    setNumeroAleatorio('Error');
  }
}

would always have ValorMax and ValorMin to be 100 and 0

you can resolve this by passing in ValorMax and ValorMin as an argument to the function

function gerarNumero(ValorMax, ValorMin) {
  const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin;
  setNumeroAleatorio(newNumber);
  if (ValorMax < ValorMin) {
    alert('Max value should be higher than Min value');
    setNumeroAleatorio('Error');
  }
}

or you can use the useCallback hook for react which would re-initialize a function if the dependencies changes

const gerarNumero = useCallback(() => {
  const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin;
  setNumeroAleatorio(newNumber);
  if (ValorMax < ValorMin) {
    alert('Max value should be higher than Min value');
    setNumeroAleatorio('Error');
  }
}, [ValorMax, ValorMin]);

You should add Math.floor() function in your gerarNumero() function.

const newNumber = parseInt(Math.floor(Math.random() * (ValorMax - ValorMin) + ValorMin));

Please check following link https://futurestud.io/tutorials/generate-a-random-number-in-range-with-javascript-node-js