리액트 회원가입 폼관련 질문드립니다..

안녕하세요 선생님
제가 스스로 회원가입 폼을 만들어보다 궁금한 부분이 생겨 질문드립니다.

회원가입 폼을 만들다가 주민등록번호에 대한 부분을 생각해봤습니다.
 - input 필드에서 주민등록번호를 입력 시, 생기는 상황을 가정 (실제 코드는 material-ui/core를 이용하기때문에 TextField를 사용)
 1. 앞자리는 정상적으로 숫자가 보임
 2. 사용자가 -를 입력하지 않아도 자동으로 입력(입력해도 상관없음)
 3. 뒷자리는 첫 자리를 제외한 나머지는 마스킹 처리

따라서 아래와 같이 코드를 작성해봤습니다.

import React, { useState } from 'react';
import { TextField, Button } from '@material-ui/core';
import useWindowSize from './useWindowSize';
import logo from '../logo.svg';

function Signup() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const { width, height } = useWindowSize();
  const [jumin, setJumin] = useState('');
  const [realJumin, setRealJumin] = useState('');
  const handleJuminChange = (event) => {
    const maskingSymbol = '\u25CF'; // 마스킹 기호 문자열
    let input = event.target.value;
    input = input.replace('-', '');

    if (input.length > 6) {
      const ju1 = input.substring(0, 6);
      let ju2 = input.substring(6, 7);

      for (let i = 1; i < input.substring(6).length && i < 7; i++) {
        ju2 = ju2 + maskingSymbol;
      }

      input = ju1 + '-' + ju2;
    }

    setJumin(input);
    setRealJumin(event.target.value); // 실제 주민등록번호 저장
    console.log(jumin);
    console.log(realJumin);
  };
  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: height,
      }}
    >
      <form
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <div style={{ marginBottom: 20 }}>
          < img src={logo} alt="로고" />
        </div>
        <div style={{ marginBottom: 10 }}>
          <TextField
            label="이메일"
            variant="outlined"
            value={username}
            onChange={(event) => setUsername(event.target.value)}
          />
        </div>
        <div style={{ marginBottom: 10 }}>
          <TextField
            label="비밀번호"
            type="password"
            variant="outlined"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
          />
        </div>
        <div style={{ marginBottom: 10 }}>
          <TextField
            label="주민등록번호"
            value={jumin}
            variant="outlined"
            type="text"
            onChange={handleJuminChange}
            inputProps={{
              maxLength: 14,
              placeholder: 'ex) 123456-1234567',
            }}
          />
        </div>
        <div>
          <Button variant="contained" color="primary" type="submit">
            가입하기
          </Button>
        </div>
      </form>
    </div>
  );
}

export default Signup;

console.log에 realjumin이 처음엔 한자리가 보이는데, 다른 숫자를 입력하면 값이 바뀌는 상황입니다.
뭐 실제로는 이런식으로 주민등록번호를 처리하진 않겠지만,
만약 이런상황에서 주민등록번호를 저장해야하는 상황이라면 어떻게 처리해야할지 궁금합니다.