A strategy to alter redux state with action in useEffect()? - reactjs

Question

I'm trying to implement a component that takes a phone number from the redux store, parses the number up on component load with useEffect(), puts the parsed elements (country code and ten digit number) into their own state with useState() and then on onChange of the phone form, update both sections of the number AND update the full phone prop coming from the redux store. I'm obviously not doing something right here:
import React, { useState, useEffect } from 'react';
import { object, func, bool } from 'prop-types';
import { Row, Col } from 'styled-bootstrap-grid';
import { connect } from 'react-redux';
import './BillingDetails.css';
import Button from 'components/Button';
import {
setFirstName,
setLastName,
setPhone,
setEmail,
} from '../../../store/signup/actions';
import {
billingDetailsError,
isValidInput,
regExpValidations,
} from '../validateInput';
import InnerTitle from './InnerTitle';
import Input from './Input';
import PhoneInput from './PhoneInput';
import CountryCodeInput from './CountryCodeInput';
import Dropdown from './Dropdown';
const BillingDetails = ({ signup, onChange, onBlur, onNext, inputError }) => {
const { first_name: firstName, last_name: lastName, email, phone } = signup;
const [countryCode, setCountryCode] = useState('');
const [mobileNumber, setMobileNumber] = useState('');
// Parse the incoming phone prop into country code and the ten digit mobile phone. Sets separate state for both.
useEffect(() => {
const phoneArray = phone.split('');
const cc = phoneArray.splice(0, phoneArray.length - 10).join('');
setCountryCode(cc);
}, '');
useEffect(() => {
const phoneArray = phone.split('');
const tenDigitNumber = phoneArray.join('');
setMobileNumber(tenDigitNumber);
}, '');
useEffect(() => {
interpolatePhone();
}, [countryCode, mobileNumber]);
const interpolatePhone = () => {
const fixedMobile = mobileNumber.replace(/[- )(]/g, '');
const interpolatedPhone = `${countryCode}${fixedMobile}`;
setPhone(interpolatedPhone);
};
// Onsubmit concatenates country code and mobile number, calls setPhone action with concat number and onNext().
const onSubmit = e => {
e.preventDefault();
setPhone(interpolatePhone());
onNext();
};
skipping to relevant JSX:
<Col sm="12" md="12">
<>
<div className="phone-input">
<Col sm="3" md="4">
<CountryCodeInput
label="mobile number"
name="country_code"
onChange={e => setCountryCode(e.target.value)}
onBlur={onBlur}
type="country_code"
value={countryCode}
inputValue={!countryCode ? '+1' : countryCode}
masked
error={
inputError && !isValidInput(phone, regExpValidations.phone)
}
/>
</Col>
<Col sm="1" md="1">
|
</Col>
<Col sm="3" md="4">
<PhoneInput
autoFocus
name="mobile_phone"
onChange={e => setMobileNumber(e.target.value)}
onBlur={onBlur}
type="phone"
value={mobileNumber}
inputValue={mobileNumber}
masked
error={
inputError && !isValidInput(phone, regExpValidations.phone)
}
/>
</Col>
</div>
</>
</Col>
<Button
className="full-width"
onClick={onSubmit}
disabled={billingDetailsError(signup)}
>
Continue
</Button>
</Button>
</Row>
</Col>
);
};
const mapStateToProps = state => ({
signup: state.signup,
});
export default connect(mapStateToProps)(BillingDetails);