Input box doesn't accept text (CopyCat project)

I’ve worked through the CopyCat project and everything seems to work fine…except the input field doesn’t accept text when I try to type.
I’ve reviewed the video and related forum posts and as far as I can tell I have the right solution. But the text box doesn’t respond. I’ve tried logging the props to console, and it is passing valid values.
What have I missed? Any help would be greatly appreciated!

Here is the code for reference:
CopyCat.js

import React from "react";
import { styles } from "../styles.js";
import PropTypes from "prop-types";

const images = {
  copycat:
    "https://content.codecademy.com/courses/React/react_photo_copycat.png",
  quietcat:
    "https://content.codecademy.com/courses/React/react_photo_quietcat.png",
};

export class CopyCat extends React.Component {
  render() {
    const {copying, toggleTape, handleChange, value} = this.props;
    console.log(this.props);

    return (
      <div style={styles.divStyles}>
        <h1 style={{ marginBottom: "80px" }}>
          Copy Cat {this.props.name || "Tom"}
        </h1>
        <input type="text" value={value} onChange={handleChange} />
        <img
          alt="cat"
          src={copying ? images.copycat : images.quietcat}
          onClick={toggleTape}
          style={styles.imgStyles}
        />
        <p>{copying && value}</p>
      </div>
    );
  }
}

CopyCat.propTypes = {
  copying: PropTypes.bool.isRequired,
  toggleTape: PropTypes.func.isRequired,
  handleChange: PropTypes.func.isRequired,
  value: PropTypes.number.isRequired,
  name: PropTypes.string,
};

CopyCatContainer.js

import React from 'react';
import ReactDOM from 'react-dom';
import {CopyCat} from '../components/CopyCat.js';

const images = {
  copycat: 'https://content.codecademy.com/courses/React/react_photo_copycat.png',
  quietcat: 'https://content.codecademy.com/courses/React/react_photo_quietcat.png'
};


class CopyCatContainer extends React.Component {
    constructor(props) {
    super(props);

    this.state = { 
      copying: true,
      input: ''
    };

    this.toggleTape = this.toggleTape.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  toggleTape() {
    this.setState({copying: !this.state.copying})
  }
  
  handleChange(e) {
    this.setState({input: e.target.value});
  }

  render() {
    const copying = this.state.copying;
    const toggleTape = this.toggleTape;
    const handleChange = this.handleChange;
    const value = this.state.input;
    
    return (<CopyCat 
            copying={copying} 
            toggleTape={toggleTape} 
            value={value} 
            onChange={handleChange} 
            />);
  }
}


ReactDOM.render(<CopyCatContainer />, document.getElementById('app'));

Update: I still can’t see the original problem, but resetting the project and reimplementing the code seems to have cleared the problem.