Input unfocused after I type character in my react input field, I think its target issue

Question

If I type anything in my react input field, then it allows me only one character to type and then focused goes outside of the input field and then again I click on input field the allow me to write only one character

Here is my code :-

I try with ref but did not works for me and I am expecting to write in input field without losing the focus

Here is my code

import React, { useEffect, useState } from "react";
import { Box, Typography, Paper, Grid, IconButton } from "@mui/material";




export default function EmployeerMessage() {
  const [user, setUser] = useState(null);
  const [messages, setMessages] = useState([]);
  const [textMessage, setTextMessage] = useState('');
  const [file, setFile] = useState(null);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const [rooms, setRooms] = useState([]);
  const [selectedRoomId, setSelectedRoomId] = useState('');

  return (
    <section className="messageEmployee">
      <Box>
        <Grid className='flexColumnRespo' container spacing={2} sx={{ py: 5 }}>
          <Grid item xs={12} xl={8} lg={7} md={7}>
            <Item>
              <Box>
                <Box
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    py: 2,
                    px: 1,
                    borderTop: 1,
                    borderColor: "#E9E9E9",
                  }}
                  className=""
                >

                  <div className="chat-searchbox-wrap">
                    {/* The below is the input that I want to change it */}
                    <input
                      type="text"
                      className="messageText"
                      value={textMessage}
                      onChange={(e) => setTextMessage(e.target.value)}
                    />
                    <button
                      style={{ cursor: "pointer" }}
                      onClick={sendMessage}
                      className="zzzz">
                      <span>
                        Send
                      </span>
                    </button>
                  </div>
                </Box>
              </Box>
            </Item>
          </Grid>
        </Grid>
      </Box>
    </section>
  );
}

I am not able to enter more than one character in the input type="text" element in react.

After first character, the react app is retendering preventing me to enter another character. Please let me know what i am missing here.

Answer 1

It is likely your button onclick causing rerenders, you may need to write it like this

onClick={() => sendMessage()}

Otherwise, to avoid rerenders, use a ref instead, like this:

<input
  ref={inputRef}
  type="text"
  className="messageText"
/>

And to access the ref, use

console.log(inputRef.current)

Make sure to import useRef from React.