Если я прав, ваше «состояние» не меняется из-за того, как вы меняете «переменные состояния» в функции жирной стрелки handleChange.
Я могу ошибаться в зависимости от того, как устроено ваше «состояние».

Я предполагаю, что ваше «состояние» структурировано следующим образом.

const [firstName, setFirstName] = useState("");
const [email, setEmail] = useState("");
const [country, setCountry] = useState("");
const [agree, setAgree] = useState(false);    

1. Исправьте вашу функцию handleChange.

// Commented out your possibly erroneous code.
const handleChange = (event) => {
    const field = event.target.id;

    if (field === "firstName") {
        // Fix here.
        // setFirstName({ firstName: event.target.value }); ❌
        setFirstName(event.target.value); ✅
    } else if (field === "email") {
        // Fix here.
        // setEmail({ email: event.target.value }); ❌
        setEmail(event.target.value); ✅
    } else if (field === "country") {
        // Fix here.
        // setSelected({ country: event.target.value }); ❌
        setCountry(event.target.value); ✅
    } else if (field === "agree") {
        // Fix here.
        // setAgree(!agree); ❌
        setAgree(event.target.checked); ✅
        console.log(agree);
    }
};

1. Затем вы можете выполнить свою проверку следующим образом:

const canBeSubmitted = () => {
    return (
    firstName.trim().length && // TextInput
    email.trim().length && // TextInput
    country.trim().length && // Dropdown
    agree // checkbox for terms
    );
};

1. Похоже, у вас также есть опечатка для 'countryState':

costumerData.companeyState.length > 0 && // TextInput

1. Похоже, что в вашем коде после оператора && стоит точка.

costumerData.selected.length > 0 &&.   // Dropdown

Дополнение

@ Harry9345, ты можешь полностью избавиться от handleChange.

Полный исходный код ниже . Демо: https: // codeandbox.io/s/crimson-fog-vp19s?file=/src/App.js

import { useEffect, useState } from "react";

export default function App() {
  const [firstName, setFirstName] = useState("");
  const [email, setEmail] = useState("");
  const [country, setCountry] = useState("");
  const [agree, setAgree] = useState(false);

  const canBeSubmitted = () => {
    const isValid =
      firstName.trim().length && // TextInput
      email.trim().length && // TextInput
      country.trim().length && // Dropdown
      agree; // checkbox for terms

    if (isValid) {
      document.getElementById("submitButton").removeAttribute("disabled");
    } else {
      document.getElementById("submitButton").setAttribute("disabled", true);
    }
    console.log({ firstName, email, country, agree });
  };

  useEffect(() => canBeSubmitted());

  return (
    <div>
      <form action="" method="post" id="form">
        <label htmlFor="firstName">First name:</label>
        <br />
        <input
          type="text"
          id="firstName"
          name="firstName"
          value={firstName}
          onChange={(e) => setFirstName(e.target.value)}
        />
        <br />
        <label htmlFor="email">Email Address:</label>
        <br />
        <input
          type="email"
          id="email"
          name="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <br />
        <label htmlFor="country">Choose a country:</label>
        <br />
        <select
          id="country"
          name="country"
          value={country}
          onChange={(e) => setCountry(e.target.value)}
        >
          <option value="">Select..</option>
          <option value="1">USA</option>
          <option value="2">Canada</option>
          <option value="3">Algeria</option>
        </select>
        <br />
        <input
          type="checkbox"
          name="agree"
          id="agree"
          onClick={(e) => setAgree(e.target.checked)}
        />
        <label> I agree.</label>
        <br />
        <button type="submit" id="submitButton">
          Submit
        </button>
      </form>
    </div>
  );
}