Поле ввода текста теряет фокус после ввода символа

Пытаюсь сделать простое приложение, которое будет отображать на странице введенный текст. Во-первых, введенный текст не отображается. Во-вторых, поле ввода теряет фокус после каждого введенного символа. При использовании локального стейта (useState) такой проблемы не было. С чем могут быть связаны проблемы?

Код reducer'а:

const UPDATE_INPUT_TEXT = 'UPDATE-INPUT-TEXT'

const initialState = {
    text: ''
}
export const inputReducer = (state = initialState, action) => {
    const newState = JSON.parse(JSON.stringify(state))

    switch (action.type) {
        case UPDATE_INPUT_TEXT:
            newState.text += action.newText;
            return newState
        default:
            return state
    }
}

export const updateInputTextActionCreator = (newText) => ({type: UPDATE_INPUT_TEXT, newText})

код хранилища:

import {inputReducer} from "./inputReducer";

const reducers = {
    inputReducer
}

const initialState = {
    text: ''
}
const store = configureStore({
        reducer: reducers,
        preloadedState: initialState
    }
)
export default store;

index.js:

import reportWebVitals from './reportWebVitals';
import store from "./redux/store";

const renderTree = (state) => {
    console.log(state)
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
        <React.StrictMode>
            <App state={state}
                dispatch={store.dispatch.bind(store)}/>
        </React.StrictMode>
    );
}

renderTree(store.getState())

store.subscribe(() => {
    renderTree(store.getState())
})

App:

const App = (props) => {
    return (
        <div className="App">
            <div>{props.state.text}</div>
            <InputField newText={props.state} dispatch={props.dispatch}/>
        </div>
    );
}

Компонента с полем ввода:

const InputField = (props) => {
    const onTextChange = () => {
        props.dispatch(updateInputTextActionCreator(ref.current.value))
    }
    const ref = useRef(null);
    return (
        <input ref={ref} className='input' type="text" onChange={onTextChange}/>
    );
};

Ответы (0 шт):