Warning: Using UNSAFE_componentWillReceiveProps

[kaminskydeveloper]

Hello I have problem with this warning, couldn't find a solution in google.
index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details. Move data fetching code or side effects to componentDidUpdate. If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state Please update the following components: FlipMove

Here is my code.

`const Chat = () => {
const [messages, setMessages] = useState(messagesData);

const [errors, setErrors] = useState(null);

const [inputValue, setInputValue] = useState('');

const handleChange = (event) => {
setInputValue(event.target.value);
};

const messagesEndRef = useRef(null);

const scrollToBottom = () => {
messagesEndRef.current.scrollIntoView({
behavior: 'auto',
block: 'end',
inline: 'end',
});
};

const sendMessage = (event) => {
event.preventDefault();

if (inputValue !== '') {
  setMessages([
    ...messages,
    {
      id: uuid(),
      user_id: 1,
      client: true,
      patreon: false,
      message: inputValue,
    },
  ]);

  setInputValue('');
  setErrors(null);
  scrollToBottom();
} else {
  setErrors([{ message: 'Cannot be empty' }]);
}

};

useEffect(() => {
scrollToBottom();
}, [messages]);

return (



{messages.map((message) => {
return (

<div
className={message__wrapper ${ message.patreon ? 'message__wrapper--patreon' : 'message__wrapper--client' }}
key={message.id}
>
{message.patreon && (

)}
<Message
className="message"
user={message.client ? 'client' : 'patreon'}
>
{message.message}

              {message.client && (
                <Avatar
                  avatarUrl={clientAvatar}
                  className="avatar avatar-client"
                />
              )}
            </div>
          </div>
        );
      })}
    </FlipMove>

    <div className="scroll-to-end-anchor" ref={messagesEndRef}></div>
  </MessagesWrapper>

  <InputWrapper>
    <form className={errors && 'error'}>
      <textarea
        type="text"
        className="message__input"
        placeholder="Napisz wiadomość..."
        value={inputValue}
        onChange={handleChange}
        required
      />
      <Button
        type="submit"
        variant="primary"
        text="Wyślij"
        onClick={sendMessage}
      />
    </form>
  </InputWrapper>
</ChatWrapper>

);
};

export default Chat;
`

[crebro]

guys, why was this closed, I can't seem to find a solution to this problem