React Textinput Readonly Attribute: How to Make Textarea and Textfield Non-Editable

<!DOCTYPE html>
<html>

function App() {
            const [inputValue, setInputValue] = useState('React Js Input field Readonly ');

ReactDOM.render(<App />, document.getElementById("app"));
    </script>

.container {
            margin: 0 auto;
            width: 400px;
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            padding: 20px;
        }

.container h3 {
            font-size: 18px;
            margin-bottom: 20px;
        }

.container input[type="text"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            outline: none;
        }

</style>
</body>

</html>