master and student

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

function Signup() {
  const [userType, setUserType] = useState('');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const history = useHistory();

  function handleSignup() {
    // send a request to the server to sign up the user
    // handle success or failure
    history.push('/');
  }

  return (
    <div>
      <h1>Sign Up</h1>
      <label>
        User Type:
        <select value={userType} onChange={e => setUserType(e.target.value)}>
          <option value="master">Master</option>
          <option value="student">Student</option>
        </select>
      </label>
      <br />
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={e => setUsername(e.target.value)}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
      </label>
      <br />
      <button onClick={handleSignup}>Sign Up</button>
    </div>
  );
}

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const history = useHistory();

  function handleLogin() {
    // send a request to the server to log in the user
    // handle success or failure
    history.push('/');
  }

  return (
    <div>
      <h1>Log In</h1>
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={e => setUsername(e.target.value)}
        />
      </label>
      <br />
      <label>
        Password:
        <input
          type="password"
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
      </label>
      <br />
      <button onClick={handleLogin}>Log In</button>
    </div>
  );
}

function Master() {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');

  function handleInputChange(e) {
    setInput(e.target.value);
  }

  function handleOutputChange(e) {
    setOutput(e.target.value);
  }

  function handleSubmit() {
    // send input and output to the server
    //