funçao call back passada por props nao é chamada | Front-end

Tenho a classe cadastroEtapa que basicamente é uma tela de formulário que possui um campo select que esta componetizado em um outro arquivo LinhaFormSelect , estou passando a funçao selectLinhaListner que esta em cadastroEtapa para o componente LinhaFormSelect através de props que é responsável por gerar a lista de opções com informações vindas do banco de dados. O problema é que quando eu seleciono a opção ele deveria disparar o evento onSelect do e chamar a função passada por atributo , porem a função nunca é chamada.

import React, { Fragment } from 'react'
import { Button, Form, Container } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import MenuBar from './MenuBar';
import ScqApi from '../Http/ScqApi';
import LinhaFormSelect from '../Components/LinhaFormSelect';

class CadastroEtapa extends React.Component {

    constructor(props){

        super(props)
        this.state = {
            linhas : [],
            linhaId : '',
            nome : '',
            posicao : ''
        }
    }

    componentDidMount(){
        ScqApi.ListaLinhas().then(res => {
            console.log(res)
            this.setState({
            linhas : [...this.state.linhas, ...res]

        })})
    }

    selectedLinhaListner = (id) => {
        this.setState({
            linhaId : id
        })

        console.log(this.state.linhaId)
    }

    render() {
        return (
            <Fragment>

                <header>
                    <MenuBar></MenuBar>
                </header>
                <body>
                    <div>
                    <Container style={{ marginTop: 20 }}>
                        <Form>
                            <LinhaFormSelect op={this.state.linhas} onSelection={this.selectedLinhaListner} ></LinhaFormSelect>
                            <Form.Group controlId="nomeEtapaForm">
                                <Form.Label>Nome Etapa: </Form.Label>
                                <Form.Control type="text" placeholder="Nome da Etapa" />
                            </Form.Group>
                            <Form.Group controlId="posicaoEtapaForm">
                                <Form.Label>Posição: </Form.Label>
                                <Form.Control type="number" min="0" placeholder="Numero do Tanque" />
                            </Form.Group>
                            <Form.Group>
                                <Button style={{ margin: 2 }} variant="primary" type="submit">Editar</Button>
                                <Button style={{ margin: 2 }} variant="primary" type="submit">Salvar</Button>
                            </Form.Group>
                        </Form>
                    </Container>
                    </div>
                </body>
            </Fragment>
        )

    }

}

export default CadastroEtapa

import React, { Component } from 'react'
import {Form} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';


class LinhaFormSelect extends Component{

    state = {
        selection : ''
    }

    render(){

        const {op, onSelection} = this.props

        const options = op.map((linha,index) =>{
        return <option value={linha} key={linha.id} onClick={() => {onSelection(linha.id)}}>{linha.nome}</option>
        })
        return ( 
            <Form.Group controlId="linhaSelectOptions">
                <Form.Label>Escolha uma Linha</Form.Label>
                <Form.Control as="select" >
                    {[options]} 
                </Form.Control>
            </Form.Group>
        )   
    }
}

export default LinhaFormSelect