Placeholder do Input [DESAFIO]

Olá, pessoal! Como estão? Espero que todos bem.

Ao me deparar com o desafio de desenvolver o input, me veio à mente uma ideia interessante para praticar de forma simples o useState do React. O nosso placeholder do input possui um estado padrão, que é a string 'O que você procura?'. Pois aqui surge uma questão interessante: e se esse estado se alterasse quando o usuário clicar no input?

Quando o usuário clicar dentro do input, quero que o placeholder desapareça e quando o usuário clicar fora do input quero que o placeholder retorne ao estado original. Inicialmente, achei que isso se resolveria com o evento de clique. Intuitivo, não? No entanto, esse parece não ser o caso. Pelo menos eu ainda não consegui resolver desta maneira. Existem dois eventos que podem e vão nos auxiliar nessa jornada: o 'onFocus' e o 'onBlur'.

Aqui vai o meu código para quem quiser testar:

import { useState } from "react"
import { styled } from 'styled-components'

const Input = styled.input`
    width: 602px;
    height: 56px;
    box-sizing: border-box;
    display: inline-flex;
    padding: 12px 16px;
    outline: none;
    align-items: center;
    gap: 365px;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #D9D9D9;
    font-family: Gandhi Sans;
    border-radius: 10px;
    border: 2px solid var(--Degrad-com-rosa, #C98CF1);
    background: transparent url('icons/search.png') no-repeat 97% center;
    &::placeholder {
        color: #D9D9D9;
    }
`

const CampoTexto = () => {

    const [textoEstadoPadrao, setTextoEstadoPadrao] = useState('O que você procura?')

    const alterarPlaceholder = () => {
        if(textoEstadoPadrao !== '') {
            setTextoEstadoPadrao('')
        } else {
            setTextoEstadoPadrao('O que você procura?')
        }
    }

    return (<Input placeholder={textoEstadoPadrao} onFocus={alterarPlaceholder} onBlur={alterarPlaceholder} />)
}

export default CampoTexto

Bom, era isso que eu queria compartilhar com vocês. Alias, gostaria de dizer que estou adorando o curso de React.

Um grande abraço!

At.te, Yago.