[Sugestão] Seletor de cor para no formulário de criação de time

Criei um novo componente para selecionar a cor do novo time. A seguir o código:

Componente Formulario

import './Formulario.css';
import CampoTexto from '../CampoTexto/CampoTexto';
import CampoCor from '../CampoCor/CampoCor';
import ListaSuspensa from '../ListaSuspensa/ListaSuspensa';
import Botao from '../Botao/Botao';
import { useState } from 'react'

export default function Formulario(props) {
    const [nome, setNome] = useState('')
    const [cargo, setCargo] = useState('')
    const [imagem, setImagem] = useState('')
    const [time, setTime] = useState('')
    const [nomeTime, setNomeTime] = useState('')
    const [corTime, setCorTime] = useState('#6278F2')
    const [mensagemTime, setMensagemTime] = useState('')

    function aoSalvar(event) {
        event.preventDefault();
        props.aoCadastrarColab({
            nome: nome,
            cargo: cargo,
            imagem: imagem || 'https://github.com/alura.png',
            time: time
        })

        // Limpar os campos após o envio do formulário
        setNome('')
        setCargo('')
        setImagem('')
        setTime('')
        setMensagemTime('')
    }

    return(
        <section className="formulario">
            <form onSubmit={aoSalvar}>
            <h2>Preencha os dados para criar o cardo do colaborador</h2>
                <CampoTexto
                    obrigatorio={true}
                    label="Nome"
                    placeholder="Digite o nome"
                    valor={nome}
                    aoAlterar = {valor => setNome(valor)}
                />
                
                <CampoTexto
                    obrigatorio={true}
                    label="Cargo"
                    placeholder="Digite o cargo"
                    valor={cargo}
                    aoAlterar = {valor => setCargo(valor)}
                />

                <CampoTexto
                    label="Imagem"
                    placeholder="Cole a URL da imagem"
                    valor={imagem}
                    aoAlterar = {valor => setImagem(valor)}
                />
                
                <ListaSuspensa
                    obrigatorio={true}
                    label="Times"
                    itens={props.timesNomes}
                    valor={time}
                    aoAlterar = {valor => setTime(valor)}
                />

                <Botao>Criar Card</Botao>
            </form>

            <form onSubmit={evt => {
                evt.preventDefault()
                props.cadastrarTime({ nome: nomeTime, cor: corTime })
                
                setNomeTime('')
                setCorTime('#6278F2')
                setMensagemTime('Time criado!')
            }}>
            <h2>Preencha os dados para criar um novo time</h2>
                <CampoTexto
                    obrigatorio
                    label="Nome"
                    placeholder="Digite o nome do novo time"
                    valor={nomeTime}
                    aoAlterar = {valor => setNomeTime(valor)}
                />
                
                <CampoCor
                    obrigatorio
                    label="Cor"
                    valor={corTime}
                    aoAlterar = {valor => setCorTime(valor)}
                />
                <span className='mensagem-time-criado'>{mensagemTime}</span>
                <Botao>Criar Time</Botao>
            </form>
        </section>
    )
}

Componente CampoCor

import './CamporCor.css'

export default function CamporCor({ obrigatorio, label, valor, aoAlterar }) {
    function aoEscolher(event) {
        aoAlterar(event.target.value)
    }

    return (
        <div className="campo-cor">
            <label>{label}</label>
            <div className='color-input-wrapper'>
                <input className='input-cor' value={valor} onChange={aoEscolher} type='color' required={obrigatorio} />
            </div>
        </div>
    )
}

CampoCor.css

.campo-cor {
    margin: 24px 0;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.campo-cor label {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
    font-size: 1rem;
}

.campo-cor input::placeholder {
    font-style: italic;
}

Além disso, incluído no index.css as seguinte regras, pq uso o mesmo seletor de cor nos times:

.color-input-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 0 5px 2px hsla(0,0%, 0%, .1);
}

.input-cor {
  width: 180%;
  height: 60px;
  clip-path: circle(14px at 50% 50%);
}