Why isn't my React bootstrap form rendering the values passed to the attributes?

I'm using React 16.12.0. I want to use bootstrap (v 4.4.0) to construct form elements and styles. I have created this form container component, src/containers/FormContainer.jsx:

import React, {Component} from 'react';
import {FormControl, FormGroup} from 'react-bootstrap';
   ...
  render() {
    return (
        <form className="container-fluid" onSubmit={this.handleFormSubmit}>
            <FormGroup
                controlId="formBasicText">

                <Input inputType={'text'}
                   title= {'Name'}
                   name= {'name'}
                   value={this.state.newCoop.name}
                   placeholder = {'Enter cooperative name'}
                   handleChange = {this.handleInput}

                   /> {/* Name of the cooperative */}

The "Input" component (src/components/Input.jsx) has this source ...

import React from 'react';
import {FormControl, FormLabel} from 'react-bootstrap';

const Input = (props) => {
    return (
  <div>
      <FormLabel>{props.name}</FormLabel>
      <FormControl
            type="{props.type}"
            id={props.name}
            name={props.name}
            value={props.value}
            placeholder="{props.placeholder}"
            onChange={props.handleChange}
          />
  </div>
    )
}

export default Input;

The problem is, when my form is rendered, the values in my components are not evaluated. I would expect "{props.name}" to be evaluted to "name", but instead, it's rendered as "{props.name}". This is the HTML that results ...

<input name="name" placeholder="{props.placeholder}" type="{props.type}" id="name" class="form-control" value="">

What else do I need to do to get the form to render properly?