Implement style change on component's paragraph React JS

Question

I'm learning React while doing some simple applications.

I try to create an input "search and highlight" application, while the user can change the text input live.

The most of it work, I've managed to capture the paragraph's value, and the search word as well. But the highlight function doesn't seem to effect the paragraph inside the <Text> component.

Knowing the function should be written right, I tried to change the all styling of the paragraph and nothing effects it.

What have I missed there ? how can I get and change the Paragraph inside the <Text> component?

import React, { Component } from 'react';
import './App.css';

class App2 extends Component {

    constructor(props) {
        super(props);
        this.state = {
            searchWord: '',
            changedText:''
        };
        this.handleChange = this.handleChange.bind(this);
      }

      onUpdate = (val) => {
        this.setState({
        changedText: val
        })
      };  

      handleChange(e) {
        var searchWord;
        this.setState({searchWord: e.target.value})
        searchWord = e.target.value 
        console.log("search word: " +  searchWord );
        this.highlightSearch(this.state.changedText, searchWord);

    }

    highlightSearch(changedText, searchWord) {
      this.setState({inputStyle: {color:'red'}});
        console.log("text: " +  changedText );
        let parts = searchWord.split(new RegExp(`(${searchWord})`, 'gi'));
        return <span> { parts.map((part, i) => 
        <span key={i} style={part.toLowerCase() === searchWord.toLowerCase() ? { backgroundColor: 'yellow' } : {backgroundColor: 'yellow'} }>
            { part }
        </span>)
    } </span>;
    }


    render() {
      return (
        <div className="App">
          <header className="App-header">
            <p>
            Search Tool
            </p>
            <Search handleChange={this.handleChange}
            value={this.state.searchWord} />
            <Text onUpdate={this.onUpdate} 
            highlightSearch={this.highlightSearch} value={this.state.changedText}/>
          </header>
        </div>
      );
    }
  }




  class Search extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchWord : '' }
    }


    render() {
    return (
     <form >
        <label>
          Search For :  
        <input type="text" onChange={this.props.handleChange} value={this.props.searchWord} />
        </label>
      </form>
 )}
}

let inputStyle = {
  border: '1px solid black'
};


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

    this.state = {
      changedText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    };

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

  }

  handleChange(e) {
    this.setState({
      changedText: e.target.value
    });
    this.props.onUpdate(e.target.value);
  }



  render() {
    return ( 
      <div className="text-div" id="myText">
      <p  style={inputStyle} highlightSearch={this.props.highlightSearch} value={this.props.changedText}>{ this.state && this.state.changedText}</p>
      Change text:
        <textarea type="text" onChange={this.handleChange} />
      </div>
      ) }
}




export default App2;