React-Redux Markdown Previewer typing error

Tell us what’s happening:
Hey guys, I’ve recently learn to use React-Redux and have been trying to use it on the Markdown Previewer. I’m stuck because the textarea in the input will not change when typed it. Any help would be greatly appreciated! Thanks!

Your code so far

const UPDATE = 'UPDATE'
const Provider = ReactRedux.Provider;

const updateText = (text) => {
  return {type: UPDATE, payload: text}
}

const intialState = {
  markup: 'Heading1\n=======\n \nHeading2\n-------\n  \n[Visit FreeCodeCamp](https://www.freecodecamp.org/)\n  \nWe got inline code: \n \n`<h1> Hello World </h1>`\n \n ```javascript\n  arr=[0,1,3] newArr = 3*arr\n```\n1. This is a list item \n..*This is a unordered list item.\n\n >This is a block quote which is useful for emails.\n \nHere is the markdown logo: ![alt-text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png)  \n**Here is bolded text**\n'
};
const textReducer = (state = intialState.markup, action)  => {
  switch(action.type){
    case UPDATE:
      return action.payload;
  default:
  return state;
  }
}

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.props.updateText(event.target.value);
  }
 
  render(){
    return(<div id= 'diveditor'className="col-sm">
      <textarea id='editor' className="form-control" value={this.props.text} onChange={this.handleChange} rows='15' cols="100"></textarea>
        </div>
      )
  }
}
class Output extends React.Component {
  constructor(props) {
    super(props);
    this.markUp = this.markUp.bind(this)
  }
 markUp() {
   return {
      __html: marked(this.props.text,{sanitize:true})
   }
 }
  render() {
    return (
      <div id="divpreview" className="col-sm">
        <span id="preview" dangerouslySetInnerHTML={this.markUp() } /> 
        </div>
    )
  }
}
const mapStateToProps = (state) => {
  return { text:state}
}
const mapDispatchToProps = (dispatch) => Redux.bindActionCreators({updateText},dispatch)

const InputContainer = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(Input);

const OutputContainer = ReactRedux.connect(mapStateToProps, null)(Output);
const store = Redux.createStore(textReducer)

ReactDOM.render(
  <Provider store={store}>
    <div>
   <InputContainer />
    <OutputContainer />
    </div>
    </Provider>,
  document.getElementById('App')
)

My codepen
Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer/

So I solved the issue it. It was the APIs I was calling not the code itself that needed to be changed.