Check username, password - Login Form using React Hooks

I want to create a login form with array data UsersData.js:

const users = [
  {
    username: 'admin1',
    password: '12345678'
  },
  {
    username:'admin2',
    password:'012345678'
  }
];

and Login.js looks something like this:

import React, {useState} from 'react';
import { users } from 'UsersData';

  function Login() {
      const [data, setData] = useState({
        username: '',
        password: ''
      });
          
      const {uname, pass} = data;
      const checkUser = () => {
        const usercheck = users.find(user => (user.username === uname && user.password === pass));
        if(usercheck) {
          console.log("Login successful");
        }else {
          console.log("Wrong password or username");
        }
        // console.log(uname);
        console.log(usercheck);
      }

      const changeHandler = (e) => {
        setData({...data, [e.target.name]:[e.target.value]})
      }
      const handleSubmit = (e) => {
        e.preventDefault();
        checkUser();
        console.log(checkUser());
      }

    return (
      <div className="login-bg">
        <div className="card">
          <form className='loginForm'
          onSubmit={handleSubmit}
          >
          <div className="input-text">
              <input
                type="text"
                name="username"
                value={uname}
                placeholder="Username"
                aria-describedby="inputGroupPrepend2" required
                onChange={changeHandler}
              />
          </div>
          <div className="input-text">
            <input
              type="password"
              name="password"
              value={pass}
              placeholder="Password"
              aria-describedby="inputGroupPrepend2" required
              onChange={changeHandler}
            />
            
          </div>
          <div className="buttons">
              <button type="submit" className="btn btn-warning btn-block">
                Login
              </button>
          </div>
        </form>
        </div>
     </div>
    )
  }
export default Login;

So the above code only check whether the username and password fields entered in the form match the name and password of single record in the array of objects of UsersData.js the above code is working fine.I wrote checkUser() function but the result is not true.

Please show an instance of how it is done. Sorry, I'm new to ReactJS so I'm a bit confused, hope you can help. Thanks

your logic here is also not correct this is how the event handled must be

  import { useEffect, useState } from "react";
import "./styles.css";
const users = [
  {
    username: 'admin1',
    password: '12345678'
  },
  {
    username:'admin2',
    password:'012345678'
  }
];
export default function App() {
  const [data, setData] = useState({
    username: '',
    password: ''
  });
  const changeHandler = (e) => {
    setData({...data, [e.target.name]: e.target.value})
  }

  const checkUser = () => {
    const usercheck = users.find(user => (user.username === data.username && user.password === data.password));
    if(usercheck) {
      console.log("Login successful");
    }else {
      console.log("Wrong password or username");
    }
    // console.log(uname);
    console.log(usercheck);
  }


  useEffect(() => {
checkUser(users)
  }, [data.username, data.password])

  console.log(data)
  return (
    <div className="App">
      <div className="input-text">
              <input
                type="text"
                name="username"
                value={data.username}
                placeholder="Username"
                aria-describedby="inputGroupPrepend2" required
                onChange={changeHandler}
              />
          </div>
          <div className="input-text">
            <input
              type="password"
              name="password"
              value={data.password}
              placeholder="Password"
              aria-describedby="inputGroupPrepend2" required
              onChange={changeHandler}
            />
            
          </div>
    </div>
  );
}